淡出div

Im trying to get a div to have a fade out then fade in effect, but the fade out instantly disappears then the fade in works perfectly. Its like the fade in effect interrupts the fade out immediately

我试图让一个div消失然后淡出效果，但淡出瞬间消失然后淡入效果完美。它的淡入效果会立即中断淡出

$('#fillBg').stop(true,false).fadeTo(3000, 0);
$("#fillBg").hide().attr('src', bgImage).stop(false,false).fadeTo(1500, 1.0);

6 个解决方案

#1

You need add anything that is supposed to be happening after the first fadeTo animation into a callback function:

您需要将第一个fadeTo动画之后应该发生的任何内容添加到回调函数中：

 $('#fillBg').stop(false,false).fadeTo(3000, 0, function() {
    $(this).hide().attr('src', bgImage).stop(false,false).fadeTo(1500, 1.0);
 });

#2

Your problem is with the 2nd .stop. Calling stop is stopping the second fadeTo animation.

你的问题是第二个.stop。调用stop正在停止第二个fadeTo动画。

#3

$('#fillBg').fadeOut(3000, function(){
    $("#fillBg").attr('src', bgImage).fadeIn(1500);
});

Will ensure the fadeIn is run after the fade Out has completed.

确保fadeIn在淡出完成后运行。

#4

Try

尝试

$("#fillBg").fadeOut().fadeIn();

http://jsfiddle.net/g334J/

#5

You can use the callback of the fadeTo method like this

您可以像这样使用fadeTo方法的回调

//Cache the value, for performance
var divToHide = $('#fillBg');

divToHide.stop(false,false).fadeTo(3000, 0, function() {
     divToHide.hide().attr('src', bgImage).stop(false,false).fadeTo(1500, 1.0);
});

Or using fadeIn, and fadeOut

或者使用fadeIn和fadeOut

//Cache the value, for performance
var divToHide = $('#fillBg');

divToHide.fadeOut(3000, function() {
     divToHide.hide().attr('src', bgImage).fadeIn(1500);
});

#6

$('#fillBg').stop(true,false).fadeTo(3000, 0, backIn);
function backIn()
{
    $("#fillBg").fadeTo(1500, 1.0);
}

http://jsfiddle.net/4CnjB/

#1