javascript - 如何在 for 循环的每次传递中增加动画延迟

Question

首先，我创建了一个基本演示，展示了我现在拥有的东西 here .

其次，这是我正在使用的 javascript。

var boxes = ["#one","#two","#three","#four"];

boxhover = function(a){
    $("#hover").hover(
        function(){
            $(a).stop(true).delay(250).animate({opacity:1});
        },
        function(){
            $(a).stop(true).delay(250).animate({opacity:0});
        }
    )
}

for(var i=0; i<boxes.length; i++)
{
    boxhover(boxes[i])
}

我希望实现的是让每个盒子一个接一个地悬停，延迟时间为 250。我已经尝试为动画功能添加延迟(如您在上面看到的)和 setTimeout在 for 循环中，但没有运气。任何帮助都会很棒。

Answer 1

您可以将数组索引作为附加参数传递给您的 boxhover 函数，然后对延迟因子执行乘法运算。

var boxes = ["#one","#two","#three","#four"];

boxhover = function(a, i){
    $("#hover").hover(
        function(){
            $(a).stop(true).delay(250 * i).animate({opacity:1});
        },
        function(){
            $(a).stop(true).delay(250 * i).animate({opacity:0});
        }
    )
}

for(var i=0; i<boxes.length; i++)
{
    boxhover(boxes[i], i)
}

jsfiddle

替代解决方案:

要避免在 #hover 上绑定(bind)多个悬停事件处理程序并且必须维护 ID 数组，您可以执行以下操作:

$("#hover").on({
    'mouseenter': function(e) {
        // Animate the box set to visible
        animateBoxSet(1);
    },
    'mouseleave': function(e) {
        // Animate the box set to invisible
        animateBoxSet(0);
    }
});

function animateBoxSet(opacity) {
    // For each box
    $('.box').each(function (index, element) {
        // Set the delay based on the index in the set
        var delay = 250 * index;
        // Animate it the visibility after the delay
        $(element).stop(true).delay(delay).animate({
            'opacity': opacity
        });
    });
}

jsfiddle