jQuery - 서로 다른 두 객체의 애니메이션 실행시 문제가 발생했습니다.

Question

안녕하세요. 첫 번째 객체가 끝나면 두 객체의 애니메이션을 두 번째 객체에 결합하는 데 문제가 있습니다. 콜백을 사용하려고했지만 jQuery를 충돌 시키거나 예기치 않은 동작을 일으키는 구문 오류가있는 것으로 보입니다. 나는 내가 원하는 방식으로 이러한 애니메이션을 함께 넣어 가장 좋은 방법을 요청하고 싶습니다. 1 .PP이하는 MouseLeave 1에

에, 2 .TT 페이드 성장 mouseenter에

가, 2 .PP 그것은 애니메이션을 쌓아하지 않는 alsp 관련이

축소 페이드 아웃 .TT, 나는 여기에 의미 한 이벤트에 의해 호출 된 애니메이션은 진행중인 다른 애니메이션이 끝날 때까지 기다리지 않습니다. generall에서 정확하게 무엇이 아래에 있지만 yo는 하나씩 차례로 움직입니다.

$('.pp').bind({ 
    mouseenter: function() 
    { 
     $(this).animate({ 
      width: $(this).children(".tt").outerWidth(), 
      height: $(this).children(".tt").outerHeight() 
      },{duration:1000,queue:false}); 

     $(this).children(".tt").animate({ 
      opacity: 1.0 
      }, {duration:1000,queue:false}); 

    }, 
    mouseleave: function() 
    { 
     $(this).children(".tt").animate({ 
      opacity: 0 
      }, {duration:1000,queue:false}); 
     $(this).animate({ 
      width: 17, 
      height: 17 
      }, {duration:1000,queue:false}); 
    } 
}); 

Answer 1

당신은 다음과 같이 완료 콜백을 추가해야합니다

var me = $(this); 
me.animate({ 
     width: me.children(".tt").outerWidth(), 
     height: me.children(".tt").outerHeight() 
    }, { 
     duration: 1000, 
     queue: false 
     complete: function() { 
      me.children(".tt").animate(
       { opacity: 1.0 }, 
       { duration: 1000, queue: false } 
      ); 
     } 
    }); 

가 documentation를 참조하십시오.

Answer 2

난 당신이 단순히과 같이 여러 번 .animate 호출 생각 :

$(this).animate({ 
     width: $(this).children(".tt").outerWidth(), 
     height: $(this).children(".tt").outerHeight() 
     },{duration:1000,queue:false}).children(".tt") 
     .animate({ 
     opacity: 1.0 
     }, {duration:1000,queue:false}); 

은 한번 시도해하고 작동되는지 확인합니다.