JavaScript-具有更改參數的遞歸函數（插件？），直到達到數字為止（jQuery）

Question

我正在尋求改進我在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%" ）。 由於每個target和direction都不同，因此我不能只編寫一個函數並在其內部調用它，除非我將其嵌套12次，這充其量似乎還很基本。

最后，當所有這12個函數都應用后，我希望該函數（或插件？）停止執行。

不幸的是，動畫的順序不是順序的（如示例中所示。但是，我確實知道要進行動畫處理的數字的順序）。

這是我所擁有的示例： http : //codepen.io/anon/full/Dxzpj

如果有人有任何見識，將不勝感激。 謝謝！

Answer 1

這並不是特別漂亮，但是您可以通過使用自定義隊列來自定義動畫的順序。 請參閱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上看到它的實時性和混亂性。

Answer 2

如果您對所有元素都應用相同的設置，那么簡單的遞歸會很有幫助。

  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

工作實例

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