Question

我还在学习jQuery，我遇到的最大问题是如何使用几个较小的代码段并将它们组合成一个更高效的脚本。

例如，我有一个包含7个项目的图库，每个项目都会淡入，但会有不同的延迟。（因此图像编号1在1秒后淡入，图像编号2在1.5之后消失，图像编号3在半秒之后等），因此它们不会同时淡入。请参阅第二部分here。

问题是，我的代码结束了很长时间，因为我重复相同的代码，但具有不同的延迟并针对不同的div。我需要有关如何提高效率的建议。 E.g：

$( ".gal:first-child" ).delay(800).animate({
    opacity:1
  }, 1800, function() {
  });

  $( ".gal:nth-child(2)" ).delay(2000).animate({
    opacity:1
  }, 1800, function() {
  });

  $( ".gal:nth-child(3)" ).delay(800).animate({
    opacity:1
  }, 1800, function() {
  });

  $( ".gal:nth-child(4)" ).delay(1500).animate({
    opacity:1
  }, 1800, function() {
  });

   $( ".gal:nth-child(5)" ).delay(800).animate({
    opacity:1
  }, 1800, function() {
  });

    $( ".gal:nth-child(6)" ).delay(1900).animate({
    opacity:1
  }, 1800, function() {
  });

     $( ".gal:last-child" ).delay(1500).animate({
    opacity:1
  }, 1800, function() {
  });

你会如何提高效率？
将两个设定值之间的延迟随机化有用吗？
您如何确保选中图库中的所有div？（随机的n-child 1-7也许？）

Answer 1

在HTML标记中添加属性，例如数据延迟。示例HTML：

<div class="gal" data-delay="1000">
  I will show up after 1000 ms
</div>

您现在可以执行此操作：

$(".gal").each(function() {
  $(this).delay(+$(this).data("delay"))
         .animate({ opacity: 1 }, function() {});
});

当然，你可以随机使用，但我认为JS应该做很少的事情。可以在服务器上计算延迟。

Answer 2

以下是如何为他们提供长达5秒的随机延迟：

$(".gal").each(function() {
    var delay = Math.random()*5000;
    $(this).delay(delay).animate({
        opacity: 1
    }, 1800, function() {
    });
});

Answer 3

由于我无法在数字中看到任何模式，您可以使用像

这样的数组

var $els = $(".gal");
$.each([800, 2000, 800, 1500, 800, 1900, 1500], function (i, val) {
    $els.filter(':nth-child(' + (i + 1) + ')').delay(val).animate({
        opacity: 1
    }, 1800, function () {});
})

Answer 4

尝试这样的事情：

    var count =0; 
    $(".gal").each(function(index) {
        $(this).delay(++count*500).animate({ opacity: 1 },1800, function() {

        });
    });

Answer 5

您可以这样使用：

var arr = [800,2000,800,1500,800,1900,1500];
for(var i=0; i<arr.length; i++){
$( ".gal" ).delay(arr[i]).animate({
    opacity:1
  }, 1800, function() {
  });
}

但我建议你使用@Silviu Burcea回答的数据。

如何将jQuery函数组合成更小的脚本

5 个答案: