jQuery：隐藏后淡入淡出（'slide'）

Question

我想要一个 div 滑出视口，然后在具有不同背景图像的同一位置淡入。这只会把它滑出来：

$('#myDiv').hide('slide').queue(function() {
    $(this).css({'background-image': 'url(images/picB.png)'});
    $(this).fadeIn();
}

hide('slide')最终导致div设置为display: none;，位置会恢复到原来的位置。我需要做什么才能使这项工作正常进行？

Answer 1

别忘了.dequeue！

当你.queue一个函数时，你必须调用.dequeue来通知jQuery函数已经完成。

您当前的函数正在将 .fadeIn 添加到队列中，但由于您的排队函数从未 "completes"，因此它永远不会被调用。

$('#myDiv').hide('slide').queue(function() {
    $(this).css({'background-image': 'url(images/picB.png)'})
           .fadeIn()
           .dequeue(); //Tell jQuery to do the fade
});

Answer 2

我想你正在寻找这样的东西：http://jsfiddle.net/f42dsjb2/

$('#myDiv').hide('slide').queue(function() {   
    $(this).show('slide').css({"background":"red"}).dequeue();
});

jQuery：隐藏后淡入淡出（'slide'）

jQuery: fadeIn() after hide('slide')

jquery

hide

fade