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

次のようなことができます。div がどのようにスライドするかについて 3 つのケースが考えられます。

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('高速')

私の推測では、見栄えを良くするために、完了をすべて「効果」に戻してアニメーションに遅延を導入する必要があると思いますが、それは簡単なことです。