2

0、1、2、3 の代わりにランダムに表示されるように、各要素をフェードインしようとしています...

ランダムな配列を生成してから、このようにフェードを実行しようとしましたが、明らかにうまくいきません。誰でもこれを行うための最良の方法をアドバイスできますか?

同じインデックス番号を2回選択することはできないので、ランダムな配列から選択するのが最善だと思っていましたか?

私の現在の試み：

JS

var testArray = [3,2,6,4,0,1,5];
var $li = $('li').hide();


$li.each(function(i){

    var $this = $(this);

    $this.eq(testArray[i]).fadeIn(i*100);    

});​

JS フィドル: http://jsfiddle.net/YGC9f/2/

4

3 に答える 3

4

これにより、すべてのブロックが同時にフェードインします。

var testArray = [3, 2, 6, 4, 0, 1, 5];
var $li = $('li').hide();

for (var i = 0; i < testArray.length; i++) {
    $li.eq(testArray[i]).fadeIn(i * 1000);
}​

デモ: http://jsfiddle.net/YGC9f/3/

これは、ブロックごとにフェードインします。

var testArray = [3, 2, 6, 4, 0, 1, 5];
var $li = $('li').hide();

for (var i = 0; i < testArray.length; i++) {
    (function(i) {
        setTimeout(function() {
            $li.eq(testArray[i]).fadeIn(1000);
        }, i * 1000);
    })(i);
}​

デモ: http://jsfiddle.net/YGC9f/6/

于 2012-11-22T12:28:48.430 に答える
1

これを試すことができます

var testArray = [3,2,6,4,0,1,5];
$('li').hide();
$('li').each(function(i){
    $('li').eq(testArray[i]).fadeIn(i*1000);  
});

jsFiddle はこちら: http://jsfiddle.net/Claudius/776eV/1/

アップデート

そして、真にランダムなより良いバージョンを次に示します (John Resig 配列削除メソッドを使用):

http://jsfiddle.net/Claudius/cUge9/3/

于 2012-11-22T12:35:12.387 に答える
0

VisioN の回答を出発点として使用すると、次のようなランダムな配列を作成できます: http://jsfiddle.net/YGC9f/7/

var testArray = [0,1,2,3,4,5,6];
var tmp, current, top = testArray.length;
  if(top) while(--top) {
    current = Math.floor(Math.random() * (top + 1));
    tmp = testArray [current];
    testArray [current] = testArray [top];
    testArray [top] = tmp;
  }
var $li = $('li').hide();

for (var i = 0; i < testArray.length; i++) {
    $li.eq(testArray[i]).fadeIn(i * 1000);
}​
于 2012-11-22T12:34:37.470 に答える