jQuery动画制作

Question

我在一个网站上设置了这个动画。然而，当你鼠标滑过和鼠标移出的速度非常快时，即使你停止了，动画也会继续播放(就像它在que中建立动画一样)。我真的不希望发生这种情况，但是当我把stop()放入.show等时…它实际上没有做我想做的事情，因为它改变了div的位置(因为我不允许动画结束)。

链接：http://www.everybodywalks.com/main.php

$(document).ready(function() {
      $('#commercialSlide').mouseenter(function() {

          if ($('#commercialBox').is(":hidden"))
               {
                $('#commercialBox').show('slide', { direction: "down" }, 150);
                $('#commercialLink').hide();
                $('#residentialLink').hide();
               } 
               return false;
      });

       $('#commercialBox').mouseleave(function() {

          if ($('#commercialBox').not(":hidden"))
               {
                $('#commercialBox').hide('slide', { direction: "down" }, 150);
                $('#residentialLink').fadeIn(250);
                $('#commercialLink').fadeIn(250);
               }
               return false;
      });

   });

commercialBox是在链接上方弹出的红色框。commercialSlide是链接ID，commercialLink是包含链接的div。我可能会合并最后两个，但在这一点上，我只想让它工作。

Answer 1

您必须使用stop()覆盖动画队列。

替换

$('#commercialBox').show(..

使用

$('#commercialBox').stop().show(

并替换

$('#commercialBox').hide(

使用

$('#commercialBox').stop().hide(

更多信息：http://api.jquery.com/stop/

Answer 2

您应该使用：

.stop(true, true)

第一个参数将清除动画队列中的所有动画，第二个参数将立即完成当前动画。详细解释请参见.stop()。

Answer 3

尝试设置一个“意图”计时器，以防止菜单意外打开，这应该可以缓解大部分问题：

   var commercial_timer;
   $('#commercialSlide').live('mouseenter',function()
    {

        // We create a slight delay so the menu only opens when the user holds the mouse over
        // the button for a brief moment. Simply moving the cursor over and past the button
        // should not open the menu
        commercial_timer = setTimeout(function()
        {
                $('#commercialBox').show('slide', { direction: 'down' }, 150);
                $('#commercialLink').hide();
                $('#residentialLink').hide();
        },200);

    }); // End mouseenter listener


    // Clear the mouseenter timeout and close the menu if it is open, when the user exits the menu
    $('#commercialSlide, #commercialBox').live('mouseleave',function()
    {
        clearTimeout(commercial_timer);
        if($('#commercialBox').is(':visible'))
        {
                $('#commercialBox').hide('slide', { direction: "down" }, 150);
                $('#residentialLink').fadeIn(250);
                $('#commercialLink').fadeIn(250);
        }
    });