jQuery队列排序动画

Question

I have the following code that shows a slideshow. My problem is that one element is not fully hidden (fadeout) before the next one (fade in) appaears, causing me to have to fix it with CSS, which is not the ideal scenario.. this is the code:

setInterval(function() { 
  $('#slides > li:first')
    .fadeOut(500)
    .next()
    .fadeIn(500)
    .end()
    .appendTo('#slidelist');
},  2000);

I've tried the following without success:

setInterval(function() { 
  $('#slides > li:first')
    .fadeOut(500).delay(500)
    .next()
    .fadeIn(500)
    .end()
    .appendTo('#slidelist');
},  2000);

Any ideas how can I get the element fully faded out before the next one fades in?

Answer 1

If you want the fadeIn to start after your previous fadeOut finishes, use the callback function parameter to execute the fadeIn. The callback function will execute after the first action (fadeOut) completes.

Here's an example of 2 divs - 1 fading out, then 1 fading in. I used the animate function on opacity, which is essentially the same as fadeIn / fadeOut.

Animate: http://api.jquery.com/animate/
FadeOut: http://api.jquery.com/fadeout/
FadeIn: http://api.jquery.com/fadein/

jsfiddle: http://jsfiddle.net/biz79/du9utty8/

var $divs = $('div');

$divs.eq(0).animate( {"opacity":"0"},1000 , function() {
    $divs.eq(1).animate( { "opacity":"1" },1000)
})

Hopefully you can modify your code to apply this solution. If not, post a fiddle and let me know, and I can help adjust your code.