Question

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

JS

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

Answer 1

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

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

Answer 2

问题在于第二个.stop。呼叫停止正在停止第二个fadeTo动画。

Answer 3

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

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

Answer 4

尝试

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

http://jsfiddle.net/g334J/

Answer 5

您可以像这样使用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);
});

或使用fadeIn和fadeOut

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

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

Answer 6

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

http://jsfiddle.net/4CnjB/

淡出div

6 个答案: