jQuery를 사용하여 addClass / removeClass 애니메이션

jQuery와 jQuery-ui를 사용하고 있으며 다양한 객체의 다양한 속성에 애니메이션을 적용하고 싶습니다.

여기서 문제를 설명하기 위해 사용자가 마우스를 가져 가면 파란색에서 빨간색으로 변경되는 하나의 div로 단순화했습니다.

을 사용할 때 원하는 동작을 얻을 수 animate()있지만 그렇게 할 때 애니메이션 스타일이 애니메이션 코드에 있어야하므로 스타일 시트와 별개입니다. ( 예 1 참조 )

대안은 사용 addClass()하고 removeClass()있지만 내가 함께 얻을 수있는 정확한 동작을 다시 만들 수 없었다 animate(). ( 예제 2 참조 )

실시 예 1

내가 가진 코드를 살펴 보겠습니다 animate().

$('#someDiv')
  .mouseover(function(){
    $(this).stop().animate( {backgroundColor:'blue'}, {duration:500});
  })
  .mouseout(function(){
    $(this).stop().animate( {backgroundColor:'red'}, {duration:500});
  });

그것은 내가 찾고있는 모든 행동을 표시합니다 :

1. 빨강과 파랑 사이에서 부드럽게 움직입니다.
2. 사용자가 마우스를 div 안팎으로 빠르게 움직일 때 애니메이션 '과다 대기열'이 없습니다.
3. 애니메이션이 계속 재생되는 동안 사용자가 마우스를 밖으로 움직이거나 움직이면 현재 '하프 웨이'상태와 새로운 '목표'상태 사이에서 마우스가 올바르게 완화됩니다.

그러나 스타일 변경이 정의되어 animate()있으므로 스타일 값을 변경해야하며 스타일 시트를 가리킬 수는 없습니다. 스타일이 정의되는이 '조각'은 실제로 나를 귀찮게하는 것입니다.

실시 예 2

여기에 내 현재의 최선 사용하여 시도 addClass()하고 removeClass(애니메이션이 작동하려면 당신이 jQuery를-UI를 필요로합니다)

//assume classes 'red' and 'blue' are defined

$('#someDiv')
  .addClass('blue')
  .mouseover(function(){
    $(this).stop(true,false).removeAttr('style').addClass('red', {duration:500});
  })
  .mouseout(function(){
    $(this).stop(true,false).removeAttr('style').removeClass('red', {duration:500});
  });

이것은 원래 요구 사항 중 1과 2를 모두 나타내지 만 3은 작동하지 않습니다.

나는 그 이유를 이해한다 :

애니메이션 때 addClass()와 removeClass()jQuery를이 요소에 임시 스타일을 추가하고, 그들이 제공하는 클래스의 값에 도달 할 때까지 적절한 값을 증가하고, 그런 다음에야 실제로 추가 / 클래스를 제거한다.

이 때문에 스타일 속성을 제거해야합니다. 그렇지 않으면 애니메이션이 중간에 중지 된 경우 태그의 스타일 속성이 클래스 스타일보다 중요하기 때문에 스타일 속성이 유지되고 클래스 값을 영구적으로 덮어 씁니다.

그러나 애니메이션이 반쯤 완료되면 아직 새 클래스가 추가되지 않았으므로이 솔루션을 사용하면 애니메이션이 완료되기 전에 사용자가 마우스를 움직이면 색상이 이전 색상으로 이동합니다.

내가 이상적으로 원하는 것은 다음과 같은 작업을 수행하는 것입니다.

$('#someDiv')
  .mouseover(function(){
    $(this).stop().animate( getClassContent('blue'), {duration:500});
  })
  .mouseout(function(){
    $(this).stop().animate( getClassContent('red'), {duration:500});
  });

getClassContent제공된 클래스의 내용을 어디에서 반환합니까? 요점은 이런 식으로 스타일 정의를 계속 유지할 필요는 없지만 스타일 시트의 클래스에 유지할 수 있다는 것입니다.

IE에 대해 걱정하지 않으려면 CSS 전환을 사용하여 애니메이션을 제공하고 클래스를 변경하는 jQuery를 사용하십시오. 라이브 예 : 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;
}

또 다른 솔루션 (그러나 Richard Neil Ilagan이 지적한 jQueryUI가 필요합니다) :-

addClass, removeClass 및 toggleClass도 두 번째 인수를 허용합니다. 한 상태에서 다른 상태로 이동하는 시간

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

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

jquery ui 's switchClass, Heres 예제를 사용할 수 있습니다 .

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

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

추가 기간을 활성화 하려면 jQuery UI 효과 코어 (13KB) 가 필요합니다 (Omar Tariq이 지적한 것처럼)

나는 이것을 조사하고 있었지만 입 / 출력에 대한 다른 전환 속도를 원했습니다.

이것이 내가 한 일입니다.

//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로 바뀐 다음 2 초에 걸쳐 천천히 정상으로 되돌아갑니다.

여기 바이올린이 있습니다

질문이 상당히 오래되었지만 다른 답변에없는 정보를 추가하고 있습니다.

OP는 이벤트가 완료되는 즉시 stop ()을 사용하여 현재 애니메이션을 중지합니다. 그러나 함수와 매개 변수의 올바른 조합을 사용하면 도움이됩니다. 예. 큐 애니메이션에 영향을 미치기 때문에 stop (true, true) 또는 stop (true, false).

다음 링크는 stop ()에서 사용할 수있는 다양한 매개 변수와 finish ()와의 차이점을 보여주는 데모를 보여줍니다.

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

OP는 JqueryUI를 사용하는 데 아무런 문제가 없었지만 유사한 시나리오를 경험할 수 있지만 JqueryUI를 사용하여 IE7 및 8을 지원할 수없는 다른 사용자를위한 것입니다.