问题:

I have the following code that animates a background image. At the end of the animation, it fades out. However, what I would like to achieve is have the element fade out before the animation is complete. So, if the animation takes 6 seconds, and the fadeout takes 2 seconds, the fade would start at 4 seconds so that the end of the animation, and the end of the fade out happen at the same time. Any help would be much appreciated.

first_slide.animate({'background-size':'100%'}, 6000, 'linear').fadeOut(2000);

回答1:

You have to assign the animation differently, adding queue:false value so the div can have two animations at the same time.Then just add a delay:

http://jsfiddle.net/8df2t/

first_slide.animate({
    'background-size': '100%'
}, {
    duration: 6000,
    easing: 'linear',
    queue: false
})
    .delay(4000).fadeOut(2000);

回答2:

Try to use the .delay(), it delays the execution of the fadeOut(2000) stmt by 4 seconds

first_slide.animate({'background-size':'100%'}, 6000, 'linear').delay(4000).fadeOut(2000);

回答3:

You can use both of them separately as well.

     first_slide.animate({'background-size':'100%'}, 6000, 'linear');

     window.setTimeout(function(){

           first_slide.fadeOut(2000);       
     },4000);