지우기 jQuery를 애니메이션이 제대로

Question

내 코드에서 나는과 같이 각 회전 목마 항목에 객체 애니메이션 오전 :

first_text1.fadeTo(textDuration, 1, function(){ 
    second_text1.fadeTo(textDuration, 1); 
}); 

슬라이드 변경 내가 $animations 어떤 애니메이션이 그들에 추가 한 모든 개체를 포함하는 경우 다음 호출 할 때 :

$animations.stop(true, true); 

후 나는 전화 :

$animations.each(function() { 
    $(this).removeAttr('style'); 
}); 

렘에 애니메이션에 의해 남겨지는 인라인 CSS 중 일부를 제거하여 해당 슬라이드로 돌아갈 때 애니메이션을 반복 할 수 있습니다.

내 문제는 위 코드에서 second_text1이 될 두 번째 콜백 애니메이션에서 스타일이 절대로 제거되지 않는다는 것입니다.

어떻게 해결할 수 있습니까?

Answer 1

여기서 문제는 변수의 선택자 인 것으로 나타났습니다. 일부 변수에는 둘 이상의 변수가 있습니다.

예.

var first_text2 = $('li#region-2 .text-elements h2, li#region-2 .text-elements h3'); 
var second_text2 = $('li#region-2 .text-elements p'); 

thee removeAttr 함수가 변수의 모든 요소에서 제대로 작동하지 않았습니다. 원래는 내 질문에 더 많은 코드를 표시하지 않는

first_text2.each(function() { 
    $(this).removeAttr('style'); 
}); 

사과 전화를 내가 가진이 문제를 해결하려면!

Answer 2

$animations을 보지 않고서는 second_text1의 스타일이 삭제되지 않는 이유를 말하기 어렵습니다. 그러나 개인적인 경험을 통해 jQuery(':animated')의 문제는 애니메이션 처리 중에있는 개체 만 발견한다는 것입니다. 애니메이션이 완료되는 순간 객체는 더 이상 :animated을 고려하지 않습니다.

애니메이션을 적용 할 각 객체에 클래스를 추가하고이를 $animations 대신 선택자로 사용하는 것이 좋습니다.

그래서 다음과 같이 변경합니다 :

1. 클래스

   $('.animatedClass').stop(true, true); 
   
   $('.animatedClass').each(function() { 
       $(this).removeAttr('style'); 
   }); 
   

로 변경 $animations .fadeTo()

first_text1.addClass('animatedClass').fadeTo(textDuration, 1, function(){ 
    second_text1.addClass('animatedClass').fadeTo(textDuration, 1); 
}); 

이 경우, 애니메이션을하기 전에 클래스를 추가

DEMO : http://jsfiddle.net/GVjBn/19/

희망하시는 분은이게 무엇 이니? 다른 질문이 있으면 알려주세요.

해피 코딩!