JavaScript-具有更改参数的递归函数（插件？），直到达到数字为止（jQuery）

Question

I'm looking to improve a script I've written in jQuery to do some animation that chains multiple animations together (in somewhat of a timeline sequence). 我正在寻求改进我在jQuery中编写的脚本，以执行一些将多个动画链接在一起的动画（按时间轴顺序排列）。 Instead of manually chaining each individual animation, I'd like to write a function to replace a few elements that are standard in each animation. 我不想编写手动链接每个单独的动画的方法，而是编写一个函数来替换每个动画中的一些标准元素。

Admittedly, I don't have the JavaScript knowledge to know the best practices to accomplish this; 诚然，我不具备JavaScript知识，无法了解实现此目标的最佳做法。 that being said, some pointers/examples would be fantastic. 话虽这么说，一些指针/示例将是梦幻般的。

Here's what I've got: 这是我得到的：

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....
        });         
        });

    });
}

Ideally, I'd like to have arguments of target and direction to replace the initial selector (ie twelve ) and it's animation direction (ie right: "100%" ). 理想情况下，我希望使用target和direction参数来替换初始选择器（即twelve ），它是动画方向（即right: "100%" ）。 Since each target and direction is different, I can't just write a function and call it inside of itself, unless I nested it 12 times, which also seems rudimentary at best. 由于每个target和direction都不同，因此我不能只编写一个函数并在其内部调用它，除非我将其嵌套12次，这充其量似乎还很基本。

Finally, I'd like this function (or maybe a plugin?) to stop executing when all 12 of these have been applied. 最后，当所有这12个函数都应用后，我希望该函数（或插件？）停止执行。

Unfortunately, the order of the animation is not sequential (as show in the example. I do know the order of the numbers to animate, however). 不幸的是，动画的顺序不是顺序的（如示例中所示。但是，我确实知道要进行动画处理的数字的顺序）。

Here's an example of what I've got: http://codepen.io/anon/full/Dxzpj 这是我所拥有的示例： http : //codepen.io/anon/full/Dxzpj

If anyone has any insight, it would be much appreciated. 如果有人有任何见识，将不胜感激。 Thanks! 谢谢！

Answer 1

This is not particularly beautiful, but you can customize the order of animations however you want by using custom queues; 这并不是特别漂亮，但是您可以通过使用自定义队列来自定义动画的顺序。 see the queue and dequeue functions. 请参阅queue和dequeue功能。

A simple example might look like: 一个简单的示例可能如下所示：

$(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();
});

This will track the progress of your overall animation using a separate queue attached to the <body> element. 这将使用附加到<body>元素的单独队列来跟踪整个动画的进度。 When each part of the animation finishes, it calls continue_queue() to indicate that the next part should run. 动画的每个部分完成时，它将调用continue_queue()以指示下一个部分应运行。

You can use this approach to build your animation piecemeal—in separate functions, a loop, etc. And it won't actually start running until you fire it off. 您可以使用这种方法在单独的函数，循环等中逐一构建动画，直到将其触发后它才真正开始运行。

You can see this live and mess with it on jsfiddle . 您可以在jsfiddle上看到它的实时性和混乱性。

Answer 2

If you're applying the same settings to all of your elements, a simple recursion could help a lot. 如果您对所有元素都应用相同的设置，那么简单的递归会很有帮助。

  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

Working example 工作实例

JavaScript-具有更改参数的递归函数（插件？），直到达到数字为止（jQuery）

问题描述

2 个解决方案

解决方案1
0 已采纳 2013-01-15 21:11:55

解决方案2
0 2013-01-15 21:13:36

JavaScript-具有更改参数的递归函数（插件？），直到达到数字为止（jQuery）

问题描述

2 个解决方案

解决方案1 0 已采纳 2013-01-15 21:11:55

解决方案2 0 2013-01-15 21:13:36

解决方案1
0 已采纳 2013-01-15 21:11:55

解决方案2
0 2013-01-15 21:13:36