Jquery наведите курсор на анимацию - PullRequest
Новая
       13

Jquery наведите курсор на анимацию

0 голосов
/ 13 мая 2010

Кто-нибудь знает, как предотвратить повторение .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();
  });

1 Ответ

1 голос
/ 13 мая 2010

Пара идей.

Не используйте +=. Вместо этого рассчитайте желаемый пункт назначения на основе вашего оператора переключения плюс или минус начальная позиция, а затем примените это значение к вашему .animate().

Если вы хотите предотвратить анимацию во время анимации элемента, вы можете использовать селектор jQuery :animated, чтобы предотвратить ее.

Что-то вроде: 

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