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

답변

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

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

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

//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');
    });
});