jQuery 실행 순서 - 애니메이션 전에 추가 정보

Question

jQuery에서 실행 순서와 관련하여 궁금한 점이 있습니다. 아래의 코드는 설계된대로 작동하지만 모든 애니메이션과 오버플로 보호가 제거 된 후에 마지막에 추가되는 closeButton div가 애니메이션 앞에 나타납니다.

이 동작의 원인은 무엇이며 어떻게 처리해야합니까?

 $('.infoRight .hoverIcon').click(
      function(){ 
       $(this).hide();//hide hover icon. Needed as it would otherwise remain visible until mouse-off 
       $(this).parent() 
        .clone(false)//create a copy of the item 
        .addClass('expandinator')//give appropriate classes to ensure appropriate styling 
        .addClass('expandinatorright') 
        .appendTo($(this).parent());//place clone in its parent. 
       $('.expandinatorright').animate({//change to colour for expanded info 
        backgroundColor: "#FFFFFF", 
        color: "#124191" 
       }, 300 , function() { 
        $('.expandinatorright').animate({//biggify 
         width: "510px" 
        }, 150, function() { 
         $('.expandinatorright').css('overflow', 'visible', function() {});//remove overflow protection 
         $('<div class="closeButton"></div>').appendTo('.expandinatorright');//add a close button 
        }); 
       }); 
      } 
     ); 

Answer 1

여기서 할 수있는 것은 "closeButton"클래스에 display:none 속성을 추가하는 것입니다. 애니메이션 작업이 끝나면 $ (". closeButton")과 같은 작업을 수행하십시오. 당신은 jsfiddle.net에서 작업의 예를 게시해야

$('.infoRight .hoverIcon').click(
      function(){ 
       $(this).hide();//hide hover icon. Needed as it would otherwise remain visible until mouse-off 
       $(this).parent() 
        .clone(false)//create a copy of the item 
        .addClass('expandinator')//give appropriate classes to ensure appropriate styling 
        .addClass('expandinatorright') 
        .appendTo($(this).parent());//place clone in its parent. 
       $('.expandinatorright').animate({//change to colour for expanded info 
        backgroundColor: "#FFFFFF", 
        color: "#124191" 
       }, 300 , function() { 
        $('.expandinatorright').animate({//biggify 
         width: "510px" 
        }, 150, function() { 
         $('.expandinatorright').css('overflow', 'visible', function() {});//remove overflow protection 
         $('<div class="closeButton"></div>').appendTo('.expandinatorright').show();//add a close button 
        }); 
       }); 
      } 
     );