Home/ Questions/Q 1099233
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T00:42:12+00:00

I am creating a simple animated menu using .animate() to enlarge the menu item

  • 0

I am creating a “simple” animated menu using .animate() to enlarge the menu item the user hovers over. This works almost right but it does some odd things if they user moves the cursor quickly. Plus the elements don’t always animate simultaneously.

Easiest way to show it is with the following link.

http://jsfiddle.net/322c5/2/

or

<head>
<script src="jquery-ui/js/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("#test1").hover( function () {
    $(this).animate( { width:"599px",left:"0px", height:"168px" }, 100 )
  },
  function () {
    $(this).animate( { width:"246px",left:"9px", height:"84px" }, 100 )
  }
);

$("#test2").hover( function () {
    $(this).animate( { width:"599px",left:"0px", height:"168px", top:"-21px" }, 100 )
    $(".test").animate( { top:"-21px" }, 100 )
  },
  function () {
    $(this).animate( { width:"246px",left:"9px", height:"84px", top:"0px" }, 100 )
    $(".test").animate( { top:"0px" }, 100 )
  }
);

$("#test3").hover( function () {
    $(this).animate( { width:"599px",left:"0px", height:"168px", top:"-63px" }, 100 )
    $(".test").animate( { top:"-63px" }, 100 )
  },
  function () {
    $(this).animate( { width:"246px",left:"9px", height:"84px", top:"0px" }, 100 )
    $(".test").animate( { top:"0px" }, 100 )
  }
);

$("#test4").hover( function () {
    $(this).animate( { width:"599px",left:"0px", height:"168px", top:"-84px" }, 100 )
    $(".test").animate( { top:"-84px" }, 100 )
  },
  function () {
    $(this).animate( { width:"246px",left:"9px", height:"84px", top:"0px" }, 100 )
    $(".test").animate( { top:"0px" }, 100 ) 
  }
);



});

</script>
<style type="text/css">
    .container {
        width:599px; background-color:#000;padding:0px;  height:336px; overflow-y:hidden;
    }

    .test {
        width:246px; background-color:#039; left:9px; top:0px; position:relative; height:84px;
    }
</style>
</head>

<body>

    <div class="container">
        <div id="test1" class="test">
      test
      </div>
        <div id="test2" class="test">
            test
        </div>
        <div id="test3" class="test">
            test
        </div>
        <div id="test4" class="test">
            test
        </div>
    </div>

</body>

Any ideas?

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    here’s my solution:
    http://jsfiddle.net/azLMc/

    I added a clearQueue() call to each mouseleave() function. that will stop the mouseover animation, and perform the mouseleave animation immediately. without it, the mouseover animation will continue to run, and if the mouse has left the area before it finishes, it won’t register that it needs to run the mouseout animation.

    After that, the first DIV was still getting stuck when the mouse left the document quickly. so I added a mouseleave() to the .container DIV to return the first DIV to it’s normal size, and sort of “reset”.

    • 0