We Keep Coding

jquery fadeout and fadein how to not flashing

i have that jquery code
$(function(){
$('.efectfade img:gt(0)').hide("");
setInterval(function(){$('.efectfade > :first-
child').fadeOut().next('img').fadeIn().end().appendTo('.efectfade');},
5000);
});
css
.efectfade {background-size: cover;
background-position:center;
background-repeat: no-repeat;
overflow: hidden;
width: 100%;
z-index: -1;
opacity:0.8;
height: 100%;}
and html
<div class="efectfade">
<img src="http://cdn.akamai.steamstatic.com/steam/apps/304390/ss_f49a29395ae871
76ee986dc16eddf9c4a3285231.1920x1080.jpg?t=1511961587">
<img src="
https://fsmedia.imgix.net/95/59/72/bf/16f7/467c/9232/c85b40a56d06/the
-brutal-centurion-one-of-the-two-new-heroes-playable-in-
shadow--might.jpeg">
</div>
and here is jsfiddle https://jsfiddle.net/rypz99/pyxjhfbv/
my question how to not flashing when changing image

For a brief moment both images are displaying. The image that is fading in is displayed beneath the image that is fading out. The flash you're seeing is the white background of the body.
I believe that one way you can achieve your desired effect is to have a div containing both images absolutely positioned within. Set Image1 to have a higher z-index than image2, and apply a fade animation on Image1.
$(() => {
$("#container").click(() => {
setInterval(() => {
$("#image1").fadeOut()
setTimeout(() => {
$("#image1").fadeIn()
}, 2500)
}, 5000)
})
})
#container {
width: 100px;
position: realative;
}
img {
width: 100px;
position: absolute;
top: 1;
left: 1;
}
#image1 {
z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<image src="http://exchangedownloads.smarttech.com/public/content/a2/a28daee5-573f-4f1d-943d-807b0fc164f5/previews/medium/0001.png" id="image1"/>
<image src="https://is4-ssl.mzstatic.com/image/thumb/Purple118/v4/ab/5e/0a/ab5e0a5a-7e10-ba06-5ca4-1cffe0cfd753/AppIcon-1x_U007emarketing-85-220-0-5.png/200x0w.jpg" id="image2"/>
</div>

jQuery image replacement with class

i'm really new to all this coding things etc. (1 month :P) and actually i try some things with jQuery.
I used the search function but actually it's quite hard for me to understand everything :P
My goal is:
When i hover over an image another image which sits on top of it slides up and another slides down.
They're all images - i don't want to publish the Website and only want to use it on my Computer for testing ^^
Also the picture on the top should be hidden at first. (I know how to do it but i actually don't know if it will be shown when using slideDown)
HTML:
<div class="newschange">
<div class="News wow fadeInDown animated"><img src="images/News.png" /></div>
<div class="newstext wow fadeInUp animated"><img src="images/newstext.png" /></div>
<div class="newshover"><img src="images/alt/newstext.png" /></div>
</div>
My jQuery Script: (it's actually in the header of the HTML)
<script>
$(function() {
$('.News').mouseover(function (){
$(.'newstext').slideUp(300);
$(.'newshover').delay(400),slideDown(300);
});
})
</script>
CSS (i don't know if this is necesarry for this :P)
.newshover {
position: absolute;
left: 802px;
top: 455px;
width: 359px;
height: 35px;
}
.newstext {
position: absolute;
left: 781px;
top: 456px;
width: 446px;
height: 32px;
}
.News {
position: absolute;
left: 377px;
top: 276px;
width: 854px;
height: 318px;
}
The problem is just that nothing happens when i hover over it :)
Here is a Screenshot:
http://i.stack.imgur.com/dzyFH.png
The 1. image is the whole thing with at the top "News" the image and the rounded rectangle.
NEWS SECTION! is the one i want to show AFTER i hover over the first image.
The red Text behind it is the one i want to hide when i hover over the first image. :)
//solved Code
<script>
$( document ).ready(function() {
$(".News").on('mouseenter',function () {
$(".newshover").delay(600).slideToggle(500);
$(".newstext").slideToggle(500);
});
$(".News").on('mouseleave', function(){
$(".newshover").slideToggle(500);
$(".newstext").delay(600).slideToggle(500);
})
});
</script>
<script>
$(function(){
$(".newshover").hide(0);
})
</script>

If I understood well your question this piece of code should work: https://jsfiddle.net/5naaq121/
HTML:
<div class="newschange">
<div class="News"><img src="http://maalaeasurfresort.com/wp-content/uploads/2014/09/beach_cy.jpg" /></div>
<div class="newstext"><img src="http://www.honduras.com/wp-content/uploads/2012/05/white-sandy-beach2-300x200.jpg" /></div>
<div class="newshover"><img src="http://www.lakecountyparks.com/_images/whihala_beach/wb_beach.jpg" /></div>
</div>
JS:
$(function(){
$('.newschange').mouseenter(function (){
$('.newshover').slideUp(300);
$('.newstext').delay(400).slideUp(300);
})
});
CSS:
.newschange {
display:block;
width:300px;
height:200px;
position:relative;
overflow:hidden;
}
.newshover {
position: absolute;
left:0;
top:0;
width:300px;
height:200px;
}
.newstext {
position: absolute;
left:0;
bottom:0;
width:300px;
height:200px;
}
.News {
position: absolute;
left:0;
top:0;
width:300px;
height:200px;
}

swapping images on hover with preload

i have a logo listing which I would like to enhance with an hover effect. (logo in color <-> logo in black and white)
I have the following markup:
var sourceToggle = function () {
var $this = $(this);
var newSource = $this.data('hover');
$this.data('hover', $this.attr('src'));
$this.attr('src', newSource);
}
$(function() {
$('img[data-hover]').each(function() {
new Image().src = $(this).data('hover');
}).hover(sourceToggle, sourceToggle);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="url">
<img src="http://lorempixel.com/200/200/sports/1/" data-hover="http://lorempixel.com/g/200/200/sports/1/">
</a>
This code is working fine so far, but I would like to know if it is good code, or if I could make it shorter.
Also I would like to know if it is possible to preload the hover image, because sometimes it is not loaded fast enough and I see a flickering.

I would remove 'hover' Javascript part and let CSS do its job. Run JS just to prepare the field and than let the browser relax.
Here is a sample code (also a Fiddle):
$(function () {
$('img[data-hover]').each(function () {
var thisImage = $(this);
var hoverSrc = thisImage.data('hover');
var hoverImage = $('<img class="bw_image" src="' + hoverSrc + '" />');
thisImage.after(hoverImage);
})
});
.hovering {
display: inline-block;
position: relative;
}
.hovering img {
display: block;
}
.bw_image {
position: absolute;
left: 0;
top: 0;
opacity: .01;
transition: opacity ease-in-out .2s;
}
.bw_image:hover {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="hovering" href="url">
<img src="http://lorempixel.com/200/200/sports/1/" data-hover="http://lorempixel.com/g/200/200/sports/1/" />
</a>
<a class="hovering" href="url">
<img src="http://lorempixel.com/200/200/sports/2/" data-hover="http://lorempixel.com/g/200/200/sports/2/" />
</a>
<a class="hovering" href="url">
<img src="http://lorempixel.com/200/200/sports/3/" data-hover="http://lorempixel.com/g/200/200/sports/3/" />
</a>

If you are able to, I would replace the whole thing with a pure CSS hover effect and background image.
Your hover image can be "preloaded" if you make a sprite out of it (one image which is nudged over when hovered), so for example:
a {
display: block;
background: url('http://i61.tinypic.com/2cxbyaq.png') no-repeat;
width: 200px;
height: 200px;
}
a:hover {
background-position: -200px 0;
}

How to make images fade visible when i'm scrolling

<div id="smiley">
<div id="star">
<img src="inc/img/heks.png" class="star">
<img src="inc/img/impo.png" class="star">
<img src="inc/img/angst.png" class="star">
</div>
</div>
#smiley{
margin: 50px auto 80px;
width: 1132px;
height: 300px;
}
#smiley #star{
display: none;
float: left;
height: 300px;
width: 1132px;
}
#smiley #star img.star{
display: block;
float: left;
width: 300px;
margin: 50px 38px 0px;
}
I need have the images to fade visible when i'm scrolling down to them.
i hope you understand the question.
This website template, does it http://www.templatemonster.com/demo/51771.html

Demo .. Source code
If you want to show the images only when they become in the window of browser.. without affecting their loading ..
Try this, make the visibility of image hidden, then using JavaScript add class fadeIn to the image when it become in the window of browser ..
So .. in your CSS :
<style>
.star {
visibility: hidden;
}
.fadeIn {
-webkit-animation: animat_show 0.8s;
animation: animat_show 0.8s;
visibility: visible !important;
}
#-webkit-keyframes animat_show{
0%{opacity:0}
100%{opacity:1}
}
</style>
Then load jQuery library
<script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
and in your JavaScript:
<script>
function showImages(el) {
var windowHeight = jQuery( window ).height();
$(el).each(function(){
var thisPos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (topOfWindow + windowHeight - 200 > thisPos ) {
$(this).addClass("fadeIn");
}
});
}
// if the image in the window of browser when the page is loaded, show that image
$(document).ready(function(){
showImages('.star');
});
// if the image in the window of browser when scrolling the page, show that image
$(window).scroll(function() {
showImages('.star');
});
</script>
Hope this will help you ..

img is blocking hover function to fire

i need some help with the following:
i have a an image placed in my body which has a hover function
<div id="wrapper">
<img style="position: absolute;" src="img/image.png" name="man" width="150" id="man_1" />
</div>
$("#man_1").hover(function () {
$('#wrapper').append('<img id="hoverimg" src="bla.png">');
console.log("enter mouser");
},function () {
$('#hoverimg').remove();
console.log("leave mouse");
});
as you can see when im hovering the image, it appends another image which has the same top and left values as #man_1. The problem is, that when im leaving the mouse the remove does not fire because the mouse is actually on the new hoverimg
hope you get my point! Thanks

Working FIDDLE Demo
Maybe with another markup, it be easier to to this:
HTML
<div id="wrapper">
<div class="photo">
<div class="image"><img src="http://placekitten.com/200/220" /></div>
<div class="size"><img src="http://placehold.it/200x40" /></div>
</div>
</div>
CSS
.photo {
position: relative;
height: 220px;
overflow: hidden;
width: 200px;
}
.photo .image {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.photo .size {
position: absolute;
height: 40px;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
margin-bottom: -40px;
transition: margin-bottom 0.3s;
}
.photo .size.show {
margin-bottom: 0;
}
JS
$(function () {
$('.photo')
.on('mouseenter', function () {
$(this).find('.size').addClass('show');
})
.on('mouseleave', function () {
$(this).find('.size').removeClass('show');
});
});

You have to use the mouseenter and mouseout events
$("#man_1").mouseenter(
function() {
$('#wrapper').append('<img id="hoverimg" src="bla.png">');
console.log("enter mouser");
});
$('#hoverimg').mouseout(
function() {
$('#hoverimg').remove();
console.log("leave mouse");
}
);

What if you bind the hover event to the #wrapper instead?
That works, in this FIDDLE.

Please have a look at http://jsfiddle.net/2dJAN/43/
<div class="out overout">
<img src="http://t3.gstatic.com/images?q=tbn:ANd9GcSuTs4RdrlAhxd-qgbGe9r0MGB9BgwFrHDvfr9vORTBEjIYnSQ8hg" />
</div>
$("div.overout").mouseover(function() {
$(this).append("<img src='http://files.softicons.com/download/system-icons/apple-logo-icons-by-thvg/png/512/Apple%20logo%20icon%20-%20Classic.png' id='hovering'/>")
}).mouseout(function(){
$('#hovering').remove();
});
I used mouseover and mouseout instead of hover.
I understood as you want to show both images on mouseover and remove the added image on mouseout. Is that correct or not?