JQuery apply each for

Question

いくつかの要素ごとにランダムな不透明アニメーションの長さを設定したいとします。私の考えは、要素のインデックスを取得し、それに乱数を掛けてこれを期間に適用することでした。しかし、これは全体のために同じ時間のamotを適用する...私は間違って何をしたのですか？

ここ

var numLow  = 100, 
    numHigh  = 3000, 
    adjustedHigh = (parseFloat(numHigh) - parseFloat(numLow)) + 1, 
    numRand  = Math.floor(Math.random()*adjustedHigh) + parseFloat(numLow); 

$('ul li').each(function(index, value) { 
    var numbb = index + 1 * numRand; 
    $(this).css('opacity','0'); 
    $(this).animate({ 
     opacity: 1 
    },numbb); 
}); 

はそれへのリンクです：：私は、彼らは乗算の前に追加されますindex + 1の周りに括弧を追加http://jsfiddle.net/moabi/PCqMC/

Answer 1

$('ul li').each(function(index, value) { 
     var numbb = (index + 1) * numRand; 
     $(this).css('opacity', 0).animate({ 
      opacity: 1 
     }, numbb); 
    }); 

注

は、ここに私のコードです。また、私は.css()と.animate()コールを連鎖させたので、$(this)は一度だけ作成しなければなりませんでした。デモンストレーション用

var $LIs = $('ul li'); 
    for (var i = 0, len = $LIs.length; i < len; i++) { 
     var numbb = (i + 1) * numRand; 
     $LIs.eq(i).css('opacity', 0).animate({ 
      opacity: 1 
     }, numbb); 
    }); 

A JSPerf：適切.each()超える大きな性能向上があるhttp://jsfiddle.net/PCqMC/6/

UPDATEサイドノートで

、for()ループを使用：ここで

はデモです： http://jsperf.com/jquery-each-vs-for-loops/2

Answer 2

バリエーションを得るには、計算の周りにいくつかの括弧が必要です。 numRandによる乗算が最初に起きてからインデックスを追加していたので、本質的にバリエーションはありませんでした。あなたが意図したとおりに括弧を追加すると、あなたに多くのより多くのバリエーションを与える：jsFiddleで

var numLow = 100, 
    numHigh = 3000, 
    adjustedHigh = (parseFloat(numHigh) - parseFloat(numLow)) + 1, 
    numRand = Math.floor(Math.random()*adjustedHigh) + parseFloat(numLow); 

$('ul li').each(function(index, value) { 
    var numbb = (index + 1) * numRand; 
    $(this).css('opacity','0'); 
    $(this).animate({ 
     opacity: 1 
    },numbb); 
}); 

：http://jsfiddle.net/jfriend00/YRTU5/

私も不透明でフェージングのためのショートカットとして.fadeIn()を使用することをお勧めします。

Answer 3

ループ内で同じ乱数を使用しています。だから、ループ内で乱数を生成する！以下

の作業コード： - それは:)であるよう

$('ul li').each(function(index, value) { 
     var numRand = Math.floor(Math.random()*adjustedHigh) + parseFloat(numLow); 
     var numbb = index * numRand; 
     $(this).css('opacity','0'); 

     $(this).animate({opacity: 1},numbb); 
}); 

残りのコードは、あるべきコードがnumbbが増加指数1,2,3などで修飾しなければならないことジャスパーの意見の後に変更さ