복제 후 한 번만 삽입

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/