克隆和insertAfter只有一次

Question

我想從#navCotainer克隆第一個孩子的按鈕，並將其插入最後一個按鈕後。

現在的問題是：腳本類插入第一個孩子3次。我必須做些什麼才能讓愛爾蘭成爲對的？而且，我在做什麼錯了？

當然

的鏈接小提琴http://jsfiddle.net/ygjDR/和代碼：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 

<span class="moveNav8 left8">left</span> 

<div id="navContainer" style="width: 100%; overflow-y: auto;"> 
    <div class="button">1</div> 
    <div class="button">2</div> 
    <div class="button">3</div> 
    <div class="button">4</div> 
</div> 

<script type="text/javascript"> 
    $(document).on('click','.moveNav8', function() { 
     if($(this).hasClass('left8')) { 
      $('.button').animate({ 
       left: '-=305' 
      }, 1000, function() { 
       $('#navContainer div.button:first-child').addClass("xxxx"); 
       $('#navContainer ').children('div.button:first-child').clone().css("background-color","orange").insertAfter("#navContainer div.button:last-child"); 
      }); 
     } 
    }); 
</script> 

<style type="text/css"> 
.button { 
    position: relative; float: left; 
    width:100px; 
    height:50px; 
    background-color:green; 
    margin-right:10px; 
} 
.moveNav8 { 
    position:absolute; 
    top:100px; 
    left:0px; 
    background-color:red; 
    width:40px; 
    height:40px; 
} 
.moveNav8.right8 { 
    left:100px; 
} 
</style> 

Answer 1

試試這個：

http://jsfiddle.net/gtttG/

您需要添加一個支票$(".button:animated").length === 0。

Answer 2

爲每個項目調用動畫回調，追加按鈕4次。採用遞延方式的最後一個動畫之後，而不是執行回調只有一次：

$(document).on('click', '.moveNav8', function() { 
    if ($(this).hasClass('left8')) { 
     $('.button').animate({ 
      left: '-=305' 
     }, 1000).promise().done(function() { 
      $('#navContainer div.button:first-child').addClass("xxxx"); 
      $('#navContainer').children('div.button:first-child').clone().css("background-color", "orange").insertAfter("#navContainer div.button:last-child"); 
     }) 
    } 
}); 

http://jsfiddle.net/ygjDR/3/