[英]How to increase the delay on animation on every pass of a for loop
First I've created a basic demonstration of what I have at the moment here . 首先我创建了什么,我目前所面对的一个基本的示范这里 。
Second this is the javascript I'm using. 其次,这是我正在使用的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])
}
What I'm hoping to achieve is to have each box hover one after the each other with a delay time of 250. I've tried adding a delay to the animation function (as you can see above) and also a setTimeout in the for loop, but no luck. 我希望实现的是让每个盒子一个接一个地悬停,延迟时间为250.我已经尝试为动画功能添加延迟(如上所示)以及for中的setTimeout循环,但没有运气。 Any help would be great.
任何帮助都会很棒。
You can pass in the array index as an additional parameter to your boxhover
function and then perform a multiplication on the delay factor. 您可以将数组索引作为附加参数传递到
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)
}
Alternative Solution: 替代方案:
To avoid binding multiple hover event handlers on #hover
and having to maintain an array of IDs, you can do the following: 为了避免在
#hover
上绑定多个悬停事件处理程序并且必须维护一组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
});
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.