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

夫妇的想法。

请勿使用+=。请根据您的开关语句加或减开始位置计算所需的目的地，然后将该值应用于您的.animate()。

如果要防止元素当前动画时发生动画，可以使用jQuery的:animated选择器来阻止动画。

喜欢的东西：

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

来源

2010-05-13 12:30:00 user113716

一些好的想法。谢谢！ – Brian 2010-05-13 12:41:53

Jquery与动画悬停

回答

相关问题