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");

如果按“序列.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/

需要序列.css（）用于多重div

1 个答案: