jQuery를 사용한 addClass/removeClass 애니메이션 생성

jQuery를 사용한 addClass/removeClass 애니메이션 생성

jQuery와 jQuery-ui를 사용하고 있으며 다양한 오브젝트에 다양한 속성을 애니메이션으로 만들고 싶습니다.

이 문제를 설명하기 위해 사용자가 마우스를 올리면 파란색에서 빨간색으로 바뀌는 하나의 기호로 단순화했습니다.

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

다른 은 른른른 an an an를 사용하는 입니다.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 를 사용할 수 있습니다.예를 들어 다음과 같습니다.

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

아니면 이 jsfiddle을 보세요.

jQuery UI effects-core(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에서는 Jquery를 사용하는 데 문제가 없었지만UI는 비슷한 시나리오가 발생할 수 있지만 Jquery를 사용할 수 없는 다른 사용자를 위한 것입니다.UI/IE7 및 8도 지원해야 합니다.

언급URL : https://stackoverflow.com/questions/7302824/animating-addclass-removeclass-with-jquery