현재 애니메이션이 실행되는 동안 다음 애니메이션 시작으로 이동하지 못하도록합니다.

Question

저는 jquerys mouseover/mouseout events가있는 dom 객체 인 애니메이션입니다. 이전 애니메이션이 실행되는 동안 마우스를 입력하거나 종료하지 않는 한이 방법이 정상적으로 작동합니다. 그런 다음보기 흉한 다음 애니메이션의 시작 부분으로 이동합니다.

어떻게 피할 수 있습니까?

$("#leftlogo").on("mouseover", function(t) { 
    $(t.target).css("animation-name", "left-over"); 
}).on("mouseout", function(t) { 
    $(t.target).css("animation-name", "left-out"); 
}); 

Answer 1

CSS3 애니메이션 이벤트 대신 jQuery를, 당신은 CSS3의 animationend 이벤트 등 다양한 이벤트, 1 CSTE 연구진() 핸들러를 사용할 수 호출 체인의 http://www.sitepoint.com/css3-animation-javascript-event-handlers/

.

//set boolean when animating 
    var isAnimating = false; 

    $("#leftlogo").on({ 
    //handle mouseover 
    "mouseover": function(t) { 
    $(t.target).css("animation-name", "left-over"); 
    isAnimating = true; 
    }, 
    //handle animationend event 
    "animationend": function(e) { 
     if (e.animationName == "animation-name")  
     { isAnimating = false; } 
    }, 
    //handle mouseout 
    "mouseout": function(t) { 
    while (isAnimating != false) 
     { 
     //hang on a sec 
     }; 

     $(t.target).css("animation-name", "left-out"); 
    }); 

참고 사항이 테스트는 수행되지 않았습니다. 조건부와 함께 플레이해야 할 수도 있습니다.

.css() 대신 .addClass() 및 .removeClass()를 사용하는 것이 더 좋습니다. 그러면 CSS의 스타일 정의가 &의 JS 로직에만 유지됩니다.

Answer 2

내 조언 털이 CSS3 애니메이션 이벤트과 키 프레임 애니메이션을 부드럽게 피하고 대신 transition을 사용하는 것입니다. 나는 당신이 무엇을 요구하고 있는지 알지만,이 대안을 제공하면 아마도 한 잔의 코드를 저장할 수있는 반면 작은 스푼 만 필요할 수 있습니다. 아마 몇 년 안에 그것은 더 깨끗할 것입니다.

http://jsbin.com/kabep/2/edit?html,css,output

#leftlogo { 
    transition: all 1s; 
    background: pink; 
} 

#leftlogo:hover{ 
    background: yellow; 
}