for循環中的jQuery.animate（）

Question

我有以下代碼：

$("." + selectedOption + ":eq(0)").show().animate({
    left: 0 + $(".option1:visible").outerWidth(),
    opacity: 1
}, 700, function() {
    $("." + selectedOption + ":eq(0)").animate({
        top: 0
    }, 700);
});

這就像我想要的那樣工作...但是我想重復多次此動畫，每次給下一個“ selectedOption”動畫，即：eq（1）、: eq（2）、: eq（3）。 所以我認為將上面的代碼放在for循環中會起作用：

for(i = 0; i < 5; i++) {
    //code here
}

當我這樣做時，它不起作用。 有什么想法嗎？

謝謝

Answer 1

代替foor循環，使用https://api.jquery.com/each/ ，您將需要更改：eq（）

或者只是將類添加到您必須設置動畫的項目中，並在完成后將其刪除

Answer 2

您需要一個遞歸函數。 像這樣：

var count = 0;
function animateNextOption() {
  $("." + selectedOption + ":eq(" + count++ + ")").show().animate({
    left: 0 + $(".option1:visible").outerWidth(),
    opacity: 1
  }, 700, animateNextOption);
}
animateNextOption();

Answer 3

嘗試使用.queue() .promise()

 var selectedOption = "selectedOption"; $({}).queue("_fx", $.map($("." + selectedOption), function(el) { return function(next) { return $(el).animate({ opacity: 1 }, 700, function() { $(this).animate({ top: 0 }, 700) }).promise().then(next) } })).dequeue("_fx") 

 .selectedOption { position: relative; opacity: 0; top: 50px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <div class="selectedOption">1</div> <div class="selectedOption">2</div> <div class="selectedOption">3</div>