为jquery设置动画，一次设置一个对象

Question

首先，我对js和jQuery都比较陌生，所以如果这是一个非常愚蠢的问题，我提前道歉。也就是说，它在这里：我正试图为背景创建一个类似大炮的动画，从一个图像到另一个图像进行缓慢的"扫掠式"过渡。我遇到的最大问题是确保这一点；a.递增计数器进行；b.图像的每个"切片"都会在下一个开始之前完成渐变。

如果有一种简单（或明显）的方法可以做到这一点，我很乐意听到。我已经拔了一段时间的头发，试图弄清楚为什么这些（和其他类似的变体）不起作用。

HTML:img class="bg"（10个实例）

(function () {
  // --- Variation 1 ---
  function effect() {
    var i = 0,
    var current = $(".bg_1:eq(" + i + ")"),
      arrLength = $(".bg_1").length;
    while (i < arrLength) {
      current.fadeOut(1000, 0);
      i++;
    }
  }
  effect();
  // --- Variation 2 ---
  function effect() {
    var i = 0,
    var current = $(".bg_1:eq(" + i + ")"),
      arrLength = $(".bg_1").length;
    while (i < arrLength) {
      current.fadeOut(1000, 0, function () {
        i++;
      });
    }
  }
  effect();
})();

我认为这可能是"I"变量范围的问题，或者是jQuery在该范围的深度上的冲突。任何可能的解决方案都将不胜感激！

谢谢。

Answer 1

如果看不到html，很难回答，但这里有一种按顺序动画化多个元素的通用方法：

(function _loop(idx) {
    var $elements = $('#wrapper .bg'), idx = idx % $elements.length;
    $elements.eq(idx).fadeIn('slow').delay(2500).fadeOut('slow', function () {
      _loop(idx + 1);
    });
}(0));​

演示：http://jsfiddle.net/UU5AM/

Answer 2

您的var current将始终是相同的

试试这个：

function effect() {
    var i = 0;
    var arrLength = $(".bg_1").length;
    while (i<arrLength) {
        $(".bg_1:eq(" + i + ")").fadeOut(1000, 0);
        i++;
    }
}
effect();

直到现在，它才会像while循环一样快地运行。这意味着它几乎会立即淡出一切。您可能希望运行setTimeout函数，直到fadeOut结束：

var i = 0;
setTimeout(function(){ 
    $(".bg_1:eq(" + i + ")").fadeOut(1000, 0);
    i++;
}, 1000);

当然，当它到达终点时，你需要重置它。

编辑：Beat Richartz的方式，在fadeOut完成后再次运行该函数，甚至比setTimeout更好。

Answer 3

您可以使用fadeOut的callback参数为其提供一个函数，该函数将在动画完成时执行。您可以使用它来提高计数器并（如有必要）设置下一个元素的动画。

例如：

(function () {
  function effect() {
    var i = 0,
    var current = $(".bg_1:eq(" + i + ")"),
      arrLength = $(".bg_1").length;
    var animateNext = function() {
      current.fadeOut(1000, 0, function() {
        i++;
        if (i < arrLength) {
          animateNext();
        }
      });
    }
    animateNext();
  }
  effect();
})();

正如您所看到的，我们在animateNext中存储了一个可重用函数。我们称之为effect结尾的第一次启动动画字符串。之后，每个下一个动画都从fadeOut中的回调开始。

Answer 4

您的解决方案正在同时为所有图片设置动画。你必须安装一个递归的事件链才能做到这一点：

// initial count value declared outside the function to not reinitialize
var count = 0;
function effect() {
  // search the current image
  var current = $(".bg_1:eq(" + count + ")");
  // if there's an image, fade it out
  if (current.length) {
    current.fadeOut(1000, function() {
     // increment the count;
     count++;
     // call the function recursively
     effect();
    });
  }
}
// call the function
effect();

请参阅此处的JSFiddle