JQuery Slideshow

Question

I have a problem with my jQuery slideshow and I cannot figure it out. During the transition of images, the slide show will blink white, and not beautifully disappear into the next image. I believe this has something to do with the following lines of code:

$('#slideshow img:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow'); 

Pressing the previous and next buttons causes the same problem.

Here is the jsFiddle slideshow.

Thanks!

Answer 1

you need to show the following image before you start fading the current one, also you have to do it at the same time, just replace the fadeIn(1000) .next () image with show() , like this http://jsfiddle.net / nyXUt / 6 /

Answer 2

I reinstalled your code and posted it here:

http://jsfiddle.net/salman/nyXUt/44/

The main changes are as follows:

Workaround for white flash : you used fading and fading. When two animations start together, both images become 50% transparent at one point, and the slide becomes whitish (or background). I used a different approach. Using z-index, I put the "hide" image in front of the "show" image, then the "hide" image disappears:

 #slideshow .current { display: block; z-index: 1; } #slideshow .animate { display: block; z-index: 2; } 

 nextItem.addClass("current"); prevItem.removeClass("current").addClass("animate").fadeOut(animDuration, function () { $(this).removeClass("animate").css("display", ""); }); 

setInterval vs setTimeout : I used setTimeout instead of setInterval, which gives more time control. The automatic transition is rescheduled when the user interrupts them using the prev / next buttons.

Animated timings . I added callbacks and .stop() to the animation to prevent duplicate animations.

Answer 3

possibly minimizing fadeOut() and fadeIn() time or fadeOut(slow)

Answer 4

When you click next or previous, you must stop the interval and previous animations, namely:

 clearInterval(run); $('#slideshow img').stop(); 

When the attenuation for the next image is complete, you restart the interval ie:

 $('#slideshow img:last').fadeIn(1000, function() { run=setInterval("switchSlide()", speed);}) 

edit: If you press the switch button 10 times within a second. About 20 animations will be performed simultaneously.

edit: If you click on the next or previous one while the image switches (automatically or otherwise) and the fading is already in progress, the fading will occur from almost fading to the complete disappearance of the entire effect in the time interval (so 1 second). At this time, the image will be mostly white.

It is better to set the acceleration during manual switching faster (for example, 300 ms or even less). It will also improve user experience.

edit: here is the fiddle

Here is the code:

 var speed = 4000; run = setTimeout("switchSlide()", speed); $(document).ready(function() { $('#caption').html($('#slideshow img:last').attr('title')); $('#previous').click(switchBack); $('#next').click(switchSlide); }); function switchSlide() { clearInterval(run); $('#slideshow img').stop(true,true); var jq=$('#slideshow img'); jq.first().css({'opacity':0}).appendTo('#slideshow').animate({'opacity':1}, 1000, function() { run = setTimeout("switchSlide()", speed); } ); $('#caption').html(jq.last().attr('title')); } function switchBack() { clearInterval(run); $('#slideshow img').stop(true,true); var jq=$('#slideshow img'); jq.last().animate({'opacity':0},1000, function() { $(this).prependTo('#slideshow').css({'opacity':1}); run = setTimeout("switchSlide()", speed);}); $('#caption').html(jq.get(1).title); } 

Answer 5

The problem is that you disappear at the same time as fading. Using standard attenuation functions, in the middle there is a point where both images are barely visible, and the empty space remains where the images were.

To fix this, I switched the order of your images so that the visible image is on top of the stack. Now we can put a new image on top of the currently visible image and fade it out. When the new image is fully visible, we will hide the previous image. This leads to a much smoother transition.

 $('#slideshow img:first').appendTo('#slideshow'); $('#slideshow img:last').fadeIn(1000, 'swing', function() { $('#slideshow img:last').prev().hide(); }); 

Here is jsfiddle: http://jsfiddle.net/nyXUt/52/

Answer 6

You can try using a delay function that works (only) with jQuery animations.

 $('#slideshow img:first').fadeOut(1000).next().delay(1000).fadeIn(1000).end().appendTo('#slideshow'); 

But the best way is if you use the provided callbacks as pointed out by other commentators here.