Question

我在网站上设置了这个动画。但是，当鼠标悬停和鼠标移动非常快时，动画会在您停止播放后继续播放（就像它在队列中构建动画一样）。我真的不希望这种情况发生，但当我把stop（）。show等...它实际上没有做我想要的，因为它改变了div的位置（因为我不允许动画完成）。

LINK：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是弹出链接的RED框。 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);
        }
    });

jQuery动画构建

3 个答案: