javascript - 需要 Sequence .css() For multi div

Question

我有 5 个 div #BS1,#BS2,#BS3,#BS4,#BS5 .. 当悬停在容器 div(左侧部分)上时，我需要制作每一个我需要隐藏每一个并延迟可能从 5000 到 2000 并再次显示它!!那是我的代码

$("#left-section-5").hover(function () {
    $("#BS1").css("display", "none").delay(500).css("display", "block");
    $("#BS2").css("display", "none").delay(50).css("display", "block");
}); 

Answer 1

.delay() method仅延迟相关元素的后续动画，.css() 方法不是动画方法。使用 .hide()和 .show()相反，它们是(如果您提供持续时间)动画方法:

$("#BS1").hide(1).delay(2000).show(1);
// etc.

或者，如果您想要更好的效果，请尝试其他的 effects methods ，例如:

$("#BS1").fadeOut("slow").delay(2000).fadeIn("slow");

如果通过“sequence .css()”表示您希望元素一个接一个地动画化，您可以这样做:

var $divs = $('div[id^="BS"]'),
    i = 0;
function next() {
    if (i < $divs.length)
        $divs.eq(i++).animate({"opacity":0}, 300)
                     .delay(100)
                     .animate({"opacity":1}, 300, next);
}
next();

演示:http://jsfiddle.net/r4byV/