Question

首先，我对js和jQuery都比较新，所以如果这是一个非常愚蠢的问题，我会事先道歉。那就是说，这是：我正在尝试为背景创建一个类似大炮的动画，它可以实现从一个图像到另一个图像的缓慢“扫描”转换。我遇到的最大问题是确保; 一个。递增计数器进行并且; 湾图像的每个“切片”在下一个开始之前完成其淡入淡出。

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

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

您的解决方案可以立即为所有图片制作动画。您必须安装recursive事件链才能执行此操作：

// 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 here

查看它

Answer 3

您的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循环一样快。这意味着它几乎可以立即淡出一切。只要fadeOut执行，您可能希望运行setTimeout函数：

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

当然，你需要在它结束时重置它。

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

Answer 4

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

例如：

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中的回调开始。

动画jquery一次设置一个对象

4 个答案: