1

我正在寻找改进我用 jQuery 编写的脚本来做一些将多个动画链接在一起的动画（在某种程度上是时间轴序列）。我不想手动链接每个单独的动画，而是想编写一个函数来替换每个动画中的一些标准元素。

诚然，我没有 JavaScript 知识来了解实现此目的的最佳实践；话虽如此，一些指针/例子会很棒。

这是我所拥有的：

function itemsFirstAnim() {

    // Define each target div
    var one = $(".one");
    var two = $(".two");
    var three = $(".three");
    var four = $(".four");
    var five = $(".five");
    var six = $(".six");
    var seven = $(".seven");
    var eight = $(".eight");
    var nine = $(".nine");
    var ten = $(".ten");
    var eleven = $(".eleven");
    var twelve = $(".twelve");

    // Show a block (opacity 1), give the overlay a position, show and animate it
    twelve.css("opacity", 1).children(".overlay").show().animate({ right: "100%" }, 750, function() {
        // cover the block with the overlay when the animation is done
        twelve.children('.overlay').css({ right: 0 });

        eleven.css("opacity", 1).children(".overlay").show().animate({ bottom: "100%" }, 750, function() {      
            eleven.children('.overlay').css({ bottom: 0 });

            seven.css("opacity", 1).children(".overlay").show().animate({ right: "100%" }, 750, function() {
                seven.children(".overlay").css({ right: 0 });

                and so on....
        });         
        });

    });
}

理想情况下，我希望有参数target并direction替换初始选择器（即twelve）和它的动画方向（即right: "100%"）。由于每个targetanddirection都是不同的，我不能只编写一个函数并在其内部调用它，除非我将它嵌套 12 次，这似乎充其量也是初级的。

最后，我希望这个函数（或者可能是一个插件？）在所有 12 个都被应用后停止执行。

不幸的是，动画的顺序不是连续的（如示例中所示。但是，我确实知道要制作动画的数字的顺序）。

这是我所拥有的一个例子：http: //codepen.io/anon/full/Dxzpj

如果有人有任何见解，将不胜感激。谢谢！

4

2 回答 2

0

这不是特别漂亮，但是您可以使用自定义队列自定义动画的顺序；见queue和dequeue功能。

一个简单的示例可能如下所示：

$(function () {
  // Use the body to track the animation queue; you can use whatever
  // element you want, though, since we're using a custom queue name
  var $body = $(document.body);

  // Helper functions to cut down on the noise
  var continue_queue = function () {
    $body.dequeue("my-fx");
  };
  var add_to_queue = function (cb) {
    $body.queue("my-fx", cb);
  };

  // Define your queue.  Be sure to use continue_queue as the callback
  add_to_queue(function () {
    $('#one').animate({ height: '8em' }, 750, continue_queue);
  });
  add_to_queue(function () {
    $('#two').animate({ width: '8em' }, 750, continue_queue);
  });

  // Need to call this once to start the sequence
  continue_queue();
});

<body>这将使用附加到元素的单独队列来跟踪整个动画的进度。当动画的每个部分完成时，它会调用continue_queue()以指示下一部分应该运行。

您可以使用这种方法零碎地构建动画——在单独的函数、循环等中。它实际上不会开始运行，直到您触发它。

你可以在jsfiddle上看到这个直播并搞砸它。

于 2013-01-15T21:11:55.563 回答
0

如果您对所有元素应用相同的设置，那么简单的递归可能会有很大帮助。

  var $els = $('#one, #two, #three'); // collect all your elements in an array

  (function recursive(el) {
    el.animate({height: '100px'}, 800, function() {
          if (el.next()) recursive(el.next()); // if there are more, run the function again
    });
  })($els.eq(0)); //start with the first one

工作示例

于 2013-01-15T21:13:36.607 回答