Jquery悬停动画答案

【问题标题】：Jquery hover with animationJquery悬停动画
【发布时间】：2010-05-13 11:50:18
【问题描述】：

有人知道如何在鼠标悬停动画完成之前阻止 .hover 再次发生吗？

我有以下代码，其中有 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();
  });

【问题讨论】：

标签： jquery jquery-animate

【解决方案1】：

几个想法。

不要使用+=。而是根据您的 switch 语句加上或减去起始位置来计算所需的目的地，然后将该值应用于您的 .animate()。

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

类似：

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

【讨论】：