1

我有一个函数可以在我的页面上创建 6 个元素，使用 jQuery UI 缓动来下降和反弹。

function drop_points(){
        $('.pointer').animate({
            top : '+=400'   
        }, 700, 'easeOutBounce');
    };

在那一刻，每个元素同时下降，有没有办法我可以应用这个函数来随机让它们一个接一个地下降？

每个指针的标记是这样的......

<a href="#" class="pointer c1"></a>
<a href="#" class="pointer c2"></a>
<a href="#" class="pointer c3"></a>
etc...

我知道我可以使用回调并单独定位它们，只是这看起来很臃肿，我只是好奇是否有更好的选择。

谢谢

4

3 回答 3

2

这第一部分是将函数 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;
}

然后

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();
  });
}
于 2013-08-29T14:49:16.170 回答
1

让动画在不同时间结束的解决方案：

function drop_points(){
        $('.pointer').each(function(){
             $(this).animate({
                top : '+=400'   
            }, 400 + Math.random()*600, 'easeOutBounce'); 
                    // random duration between 0.4 and 1 seconds
     });
};

每次调用 animate 时，都会有不同的持续时间。

让动画一个接一个地开始的一般解决方案： https ://stackoverflow.com/a/1218507/1669279 该解决方案涉及嵌套回调并一次选择每个项目。

让动画一个接一个地开始的非常具体的解决方案：

此解决方案仅在所有动画的持续时间相同时才有效。

function drop_points(){
        var delay = 0;
        var duration = 700;
        $('.pointer').each(function(){
             $(this).delay(delay).animate({
                top : '+=400'   
            }, duration, 'easeOutBounce'); 
            delay += duration;
     });
};

*这些解决方案不考虑随机化元素的顺序。如果您在特定方面遇到问题，请查看此答案：https ://stackoverflow.com/a/14555430/1669279

于 2013-08-29T14:51:53.920 回答
1 
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));
});

小提琴

于 2013-08-29T14:58:07.463 回答