jq 多个div从右向左依次显示_jQuery fadeOut逐个多个div，然后同时淡入所有

实际上，您同时启动 fading-out 所有元素，但具有不同的动画速度 . 如果你想使用相同的动画速度逐个淡出它们，你必须等到每个 fade-out 完成之后再在另一个上调用 fadeOut() . 在下一个例子中，我展示了如何使用递归过程概括(对于X个连续元素)这个动画 .

$(document).ready(function()

{

var fadeOutSpeed = 2000;

var fadeInSpeed = 3000;

var seqFadeOutThenFadeAllIn = function(elem)

{

// Check if exists a next element.

if (!elem.length)

{

// Fade-in all elements.

$(".custom-div").fadeIn(fadeInSpeed);

}

else

{

// Fade-out next element.

elem.fadeOut(fadeOutSpeed, function()

{

seqFadeOutThenFadeAllIn(elem.next(".custom-div"));

});

}

}

$('#divBTN').click(function()

{

// Start fading-out the first element in the set.

seqFadeOutThenFadeAllIn($(".custom-div").first());

});

});

.custom-div {

width: 70px;

height: 30px;

margin-bottom: 20px;

background-color: green;

}

Click Me!