0

小さくシンプルに保つために、ボタンをクリックすると、すべての div がランダムな方向にスライドし、新しい div の別のセットが表示されます。

jQuery コードがどのようなものかの基本的なデモ:

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

しかし、効果をランダム化することがすべてです。解決策はありますか？

4

3 に答える 3

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
                });
            });
        });
    });
于 2012-08-18T15:19:01.677 に答える
0

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

var rand = Math.random();
if (rand < .33) {
    // Some animation
} else if (rand < .66) {
    // Some other possible animation
} else {
    // Final animation possibility
}
于 2012-08-18T15:16:25.070 に答える
0

アルゴリズム：

  • 「n」個の整数の配列を作成します
  • 配列をシャッフルする
  • クリック機能で：
    • シャッフルされた配列の各値 'v' について:
      • $('#div' + v).show('高速')

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

于 2012-08-18T15:19:22.840 に答える