Jquery apply each for

Question

각 요소에 대해 임의의 불투명도 애니메이션 기간을 설정하고 싶습니다. 내 아이디어는 요소의 색인을 얻은 다음 임의의 숫자로 곱하고이를 지속 시간에 적용하는 것이 었습니다. 그러나 이것은 전체 시간 동안 같은 시간을 적용합니다 ... 내가 뭘 잘못 했니?!

다음

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); 
    }); 

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 등으로 수정해야 재스퍼의 의견 이후에 수정