Home/ Questions/Q 780219
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T20:02:27+00:00

anyone know how to stop a .hover happening again before the mouseout animation has

  • 0

anyone know how to stop a .hover happening again before the mouseout animation has finished?

I have the following code which has 4 anchors. Once hovered over the anchor the related anchor slides in using animation. My problem is you hover out and in quickly, before the square has been set back to 0px it increases the slide distance.

    <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();
  });
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Couple of ideas.

    Don’t use +=. Instead calculate the desired destination based on your switch statement plus or minus the starting position, then apply that value to your .animate().

    If you want to prevent the animation from occurring while an element is currently animated, you could use jQuery’s :animated selector to prevent it.

    Something like:

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