애니메이션이있는 Jquery 마우스 오버

mouseout 애니메이션이 완료되기 전에 .hover가 다시 발생하는 것을 멈추는 방법을 아는 사람이 누구입니까?애니메이션이있는 Jquery 마우스 오버

다음 앵커가 4 개 있습니다. 앵커 위로 맴돌면 관련 앵커가 애니메이션을 사용하여 슬라이드됩니다. 내 문제는 사각형을 다시 0px로 설정하기 전에 슬라이드 아웃 거리를 늘리기 위해 빠르게 마우스를 가져 갔다는 것입니다. 아이디어의

<body class="home"> 
<div id="container"> 
    <a class="page-link homet" id="anim-1"></a> 
    <a class="page-link about" id="anim-2"></a> 
    <a class="page-link portfolio" id="anim-3"></a> 
    <a class="page-link contacts" id="anim-4"></a> 
    <div id="header"> 
    <div id="logo"> 
    </div> 
    <ul id="navigation"> 
    <li><a id="1"></a></li> 
    <li><a id="2"></a></li> 
    <li><a id="3"></a></li> 
    <li><a id="4"></a></li> 
    </ul> 
    </div> 
    <div id="main"> 
    <div id="left-content"> 

    </div> 
    <div id="main-content"> 

    </div> 
    </div> 
</div> 
</body> 
</html>

jQuery를

var cc = { 
    displayAnim : function() { 
    actionLink = $("#container #header #navigation li a"); 
    movePosition = "0"; 
    $("#container a.page-link").css({ position:"absolute", right: 0}); 

    $(actionLink).hoverIntent( 

    function() { 
    circleToReveal = $(this).attr('id'); 
     switch (circleToReveal) { 
     case "1" : 
     movePostion = "386" 
     break; 
     case "2" : 
     moveposition = "514" 
     break; 
     case "3" : 
     movePosition = "643" 
     break; 
     case "4" : 
     movePosition = "400" 
     break; 
     default : 
     movePosition = "772" 
     }; 
     /* console.log(movePosition); */ 

     $("#container #anim-" +circleToReveal+ "").stop().animate({"right": "+="+ movePosition +"px"}, "slow"); 
    }, 
    function() { 
     $("#container #anim-" +circleToReveal+ "").stop().animate({"right": "-="+ movePosition +"px"}, "slow"); 
    } 
    ); 
    } 
    }; 

    $(window).load (function() { 
    $("body").addClass('js'); 
    $("a.pagelink").hide(); 
    cc.displayAnim(); 
    });

출처

2010-05-13 Brian

커플.

+=을 사용하지 마십시오. 대신 switch 문을 기준으로 원하는 위치를 계산하여 시작 위치를 더하거나 뺀 다음 .animate()에 해당 값을 적용하십시오.

요소가 현재 애니메이션으로 재생되는 동안 애니메이션이 발생하지 않도록하려면 jQuery의 :animated 선택기를 사용하여이를 방지 할 수 있습니다. 같은

뭔가 :

if($("#container #anim-" +circleToReveal+ "").is(':not(:animated)')) { 
    // Perform animation. 
}

출처

2010-05-13 12:30:00 user113716

좋은 아이디어. 감사! – Brian

애니메이션이있는 Jquery 마우스 오버

답변

관련 문제