javascript - 对 jQuery 的随机化效果

Question

为了让它小而简单，当点击一个按钮时，所有的 div 应该以随机的方向滑开，并且应该显示另一组新的 div。

jQuery 代码的基本演示：

$(document).ready(function() {
        $("#toggle_value").click(function(){
           $("#div1").show("fast");
           $("#div2").show("fast");
           $("#div3").show("fast");
        });
});

但这都是关于随机化效果的。有什么解决办法吗？

Answer 1

我会做这样的事情：

http://jsfiddle.net/8uKt3/13/

 $(document).ready(function() {
        var $div = $('div'),
            pos = [0, 0, 0, 500, 250, 100, 50, -500, -750, -1000, -1500], // Define your numbers
            mypos1,
            mypos2,
            $me;

        $("#toggle_value").click(function(){
            $div.each(function(){
                $me = $(this);

                // Choose a value from each array randomly
                mypos1 = pos[Math.floor(Math.random() * pos.length)];
                mypos2 = pos[Math.floor(Math.random() * pos.length)];

                // animate in a random direction in a random quantitya
                $me.animate({
                    'top' : mypos1,
                    'left': mypos2
                });
            });
        });
    });

Answer 2

你可以做这样的事情，假设你有 3 种可能的情况来说明 div 可能如何滑开：

var rand = Math.random();
if (rand < .33) {
    // Some animation
} else if (rand < .66) {
    // Some other possible animation
} else {
    // Final animation possibility
}

Answer 3

算法：

• 创建一个由“n”个整数组成的数组
• 打乱数组
• 在点击功能中：
  • 对于洗牌数组中的每个值“v”：
    • $('#div' + v).show('fast')

我的猜测是，您将使用完成全部返回“效果”来在动画中引入延迟，以使其看起来不错，但这应该是微不足道的