Javascript 如何在for循环的每个过程中增加动画的延迟

首先，我创建了一个我目前拥有的基本演示

其次，这是我正在使用的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])
}

var框=[“一”、“二”、“三”、“四”]；
boxhover=功能（a）{
$（“#悬停”）。悬停(
函数（）{
$（a）.stop（true）.delay（250）.animate（{opacity:1}）；
},
函数（）{
$（a）.stop（true）.delay（250）.animate（{opacity:0}）；
}
)
}
对于（var i=0；i，您可以将数组索引作为附加参数传递给
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)
}

@user1846307如果您有兴趣，我还添加了一个替代解决方案。感谢您提供的额外信息，不幸的是，这些框只是我的实时问题中的一个演示，我需要使用数组。但是我以前没有见过on（）函数，所以我将在将来使用它。再次感谢。
$("#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
        });
    });
}