Question

任何人都知道如何在鼠标移动动画完成之前再次停止.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();
  });

Answer 1

一些想法。

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

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

类似的东西：

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

Jquery悬停着动画

1 个答案: