1

首先，我对 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 在该范围深度的冲突。任何可能的解决方案将不胜感激！

谢谢。

4

4 回答 4

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/

于 2012-07-10T11:44:39.417 回答
0

您的解决方案是同时为所有图片设置动画。您必须安装一个递归事件链来执行此操作：

// 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一起使用

于 2012-07-10T11:41:50.957 回答
0

你的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);

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

编辑：击败 Richartz 的方式，在 fadeOut 完成后再次运行该功能，甚至比setTimeout.

于 2012-07-10T11:42:07.503 回答
0

您可以使用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。

于 2012-07-10T11:47:21.337 回答