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與動畫懸停

回答

相關問題