[JQUERY] 애니 메이팅 addClass / removeClass jQuery로

애니 메이팅 addClass / removeClass jQuery로

해결법

1. ---

   1.당신이 IE에 대해 걱정하지 않기 때문에, 왜 그냥 클래스를 변경할 수있는 애니메이션과 jQuery를 제공하기 위해 CSS 전환을 사용할 수 없습니다. 라이브 예 : http://jsfiddle.net/tw16/JfK6N/

   당신이 IE에 대해 걱정하지 않기 때문에, 왜 그냥 클래스를 변경할 수있는 애니메이션과 jQuery를 제공하기 위해 CSS 전환을 사용할 수 없습니다. 라이브 예 : http://jsfiddle.net/tw16/JfK6N/

   #someDiv{
       -webkit-transition: all 0.5s ease;
       -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
       transition: all 0.5s ease;
   }
   

2. ---

   2.또 다른 해결책은 (의견 리처드 닐 Ilagan에 의해 지적하지만, jQueryUI 필요) : -

   또 다른 해결책은 (의견 리처드 닐 Ilagan에 의해 지적하지만, jQueryUI 필요) : -

   addClass는 removeClass 및 toggleClass 또한 제 인수를 채택; 지속 시간은 하나의 상태에서 다른로 이동합니다.

   $(this).addClass('abc',1000);
   

   jsfiddle 참조 : - http://jsfiddle.net/6hvZT/1/

3. ---

   3.당신은 switchClass UI jQuery를 사용할 수 있습니다, 여기에 예제입니다 :

   당신은 switchClass UI jQuery를 사용할 수 있습니다, 여기에 예제입니다 :

   $( "selector" ).switchClass( "oldClass", "newClass", 1000, "easeInOutQuad" );
   

   또는이 jsfiddle를 참조하십시오.

4. ---

   4.당신은 (그것을 지적 단지 오마르 타리크 같은) 추가의 기간을 사용하려면 jQuery를 UI 효과 코어 (13킬로바이트)가 필요합니다

   당신은 (그것을 지적 단지 오마르 타리크 같은) 추가의 기간을 사용하려면 jQuery를 UI 효과 코어 (13킬로바이트)가 필요합니다

5. ---

   5.나는이에 찾고 있지만 및 아웃 다른 전환 속도를 가지고 싶었다.

   나는이에 찾고 있지만 및 아웃 다른 전환 속도를 가지고 싶었다.

   이것은 내가하고 결국 무엇을 :

   //css
   .addedClass {
       background: #5eb4fc;
   }
   
   // js
   function setParentTransition(id, prop, delay, style, callback) {
       $(id).css({'-webkit-transition' : prop + ' ' + delay + ' ' + style});
       $(id).css({'-moz-transition' : prop + ' ' + delay + ' ' + style});
       $(id).css({'-o-transition' : prop + ' ' + delay + ' ' + style});
       $(id).css({'transition' : prop + ' ' + delay + ' ' + style});
       callback();
   }
   setParentTransition(id, 'background', '0s', 'ease', function() {
       $('#elementID').addClass('addedClass');
   });
   
   setTimeout(function() {
       setParentTransition(id, 'background', '2s', 'ease', function() {
           $('#elementID').removeClass('addedClass');
       });
   });
   

   이것은 즉시 #의 5eb4fc에 배경 색상을 켜고 천천히 이초을 통해 다시 정상으로 페이드.

   여기에 바이올린입니다

6. ---

   6.문제는 상당히 오래된,하지만, 나는 다른 답변에없는 정보를 추가 해요.

   문제는 상당히 오래된,하지만, 나는 다른 답변에없는 정보를 추가 해요.

   영업 이익은 즉시 이벤트 완료로 현재의 애니메이션을 중지하려면 중지 ()를 사용하고 있습니다. 그러나, 함수 매개 변수의 올바른 조합을 사용하는 것이 도움이 될 것이다. 예를 들면. 정지 상태 (true, true) 또는 정지 (참, 거짓)이 잘 대기중인 애니메이션에 영향을한다.

   다음 링크는 데모를 보여 정지 () 그들이 어떻게 마무리 다를과 다른 매개 변수를 사용할 수 쇼가 ().

   http://api.jquery.com/finish/

   영업 이익은 JqueryUI를 사용하여 아무 문제가 없었다하지만이 비슷한 시나리오 건너 올 수 있지만 JqueryUI /도 지원 IE7과 8 필요를 사용할 수없는 다른 사용자를위한 것입니다.

from https://stackoverflow.com/questions/7302824/animating-addclass-removeclass-with-jquery by cc-by-sa and MIT license