[英]jQuery animation function to apply to elements randomly
I have a function that makes 6 elements on my page, fall and bounce using jQuery UI easings. 我有一个函数,在我的页面上生成6个元素,使用jQuery UI缓动掉落和反弹。
function drop_points(){
$('.pointer').animate({
top : '+=400'
}, 700, 'easeOutBounce');
};
At the minute, each element drops at the same time, Is there a way I could apply this function to randomly have them drop 1 after the other? 在那一刻,每个元素同时下降,有没有办法我可以应用这个函数随机让它们一个接一个地掉落?
The markup for each pointer is as so... 每个指针的标记都如此......
<a href="#" class="pointer c1"></a>
<a href="#" class="pointer c2"></a>
<a href="#" class="pointer c3"></a>
etc...
I know I could use callbacks and target them individually only this seems bloated and I'm just curious if there's a better alternative. 我知道我可以使用回调并单独定位它们只是看起来很臃肿而且我只是好奇,如果有更好的选择。
Thanks 谢谢
This first part is to add the function shuffle to the javascript Array object 第一部分是将函数shuffle添加到javascript Array对象
Array.prototype.shuffle = function() {
var i = this.length, j, temp;
if ( i == 0 ) return this;
while ( --i ) {
j = Math.floor( Math.random() * ( i + 1 ) );
temp = this[i];
this[i] = this[j];
this[j] = temp;
}
return this;
}
Then 然后
var array = [1,2,3,4,5,6].shuffle();
var counter = 0
function drop_points(){
$('.c'+array[counter]).animate({top :'+=400'}, 700, 'easeOutBounce',function(){
counter++;
if(counter<array.length-1)drop_points();
});
}
Solution to have the animation end at different times: 让动画在不同时间结束的解决方案:
function drop_points(){
$('.pointer').each(function(){
$(this).animate({
top : '+=400'
}, 400 + Math.random()*600, 'easeOutBounce');
// random duration between 0.4 and 1 seconds
});
};
Each time animate is called, it will be with a different duration. 每次调用动画时,它将具有不同的持续时间。
General solution to have the animations start one after the other ends: https://stackoverflow.com/a/1218507/1669279 The solution involves nesting callbacks and selecting each item at a time. 让动画一个接一个地开始的一般解决方案: https : //stackoverflow.com/a/1218507/1669279该解决方案涉及嵌套回调并一次选择每个项目。
Very specific solution to have the animations start one after the other ends: 非常具体的解决方案让动画一个接一个地开始:
This solution only works if the duration of all animations is the same. 此解决方案仅在所有动画的持续时间相同时才有效。
function drop_points(){
var delay = 0;
var duration = 700;
$('.pointer').each(function(){
$(this).delay(delay).animate({
top : '+=400'
}, duration, 'easeOutBounce');
delay += duration;
});
};
*These solutions don't take into account randomizing the order of the elements. *这些解决方案没有考虑随机化元素的顺序。 Take a look at this answer if you have trouble with that specific aspect: https://stackoverflow.com/a/14555430/1669279 如果您遇到特定方面的问题,请查看此答案: https : //stackoverflow.com/a/14555430/1669279
var time = 700,
// get the elements and "shuffle" them around
pointer = $(".pointer").get().sort(function(a, b) {
return Math.random() > 0.5;
});
// drop them one after another
$.each(pointer, function(i, e) {
setTimeout(function() {
$(e).animate({
top: "+=400"
}, time);
}, (i * time));
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.