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

以下是指向它的链接：http://jsfiddle.net/moabi/PCqMC/

Answer 1

您在循环中使用相同的随机数。所以，在循环内生成随机数！

以下工作代码： -

$('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);
});

剩余代码应该是原样的：）

在Jasper认为numbb应该随着索引1,2,3等的增加而修改后，

代码被修改。

Answer 2

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

请注意，我在index + 1周围添加了括号，因此在乘法之前会添加它们。我还锁定了.css()和.animate()来电，因此$(this)只需要创建一次。

以下是演示：http://jsfiddle.net/PCqMC/6/

<强>更新

另一方面，正确使用for()循环比.each()的性能大幅增加：

    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：http://jsperf.com/jquery-each-vs-for-loops/2

Answer 3

您需要围绕其中一项计算获得变化。首先发生numRand的乘法，然后添加索引，这样你就基本上没有变化了。添加parens会为您提供更多变化：

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

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

我还建议使用.fadeIn()作为淡化不透明度的快捷方式。

Jquery为每个应用fx

3 个答案: