Question

我是你好，我再一次陷入困境。我正在为我的网站创建一个nevigation菜单，并遇到了一个问题，即如果用户来回移动鼠标，可以轻松地将其直接滑入，进出，进出一次又一次地进出，还有一些情况下，切换活动窗口会导致动画出错。现在我的问题是，如何使动画只“播放”一次，而不是无限次排队。我尝试使用.clearQueue（），但没有帮助它。这是代码

我不希望它停止当前动画。我想让它一次防止多个动画排队。所以基本上每个动画都会播放直到完成，然后只能执行一个关闭或打开的事件，而不是无限的。

$(".navigation").delay(300).mouseenter(function()
{
    $('.navigation').delay(300).animate({ width: "285px" }, 200);

    $('body').delay(300).animate({ left: "285px" }, 200);

    $('.menubutton').delay(300).animate({ left: "300px" }, 200);

    $('.navigation p').delay(300).show(200);

});

$(".navigation").delay(300).mouseleave(function()
{
    $('.navigation').delay(300).animate({ width: "62px" }, 200);

    $('body').delay(300).animate({ left: "62px" }, 200);

    $('.menubutton').delay(300).animate({ left: "77px" }, 200);

    $('.navigation p').delay(300).hide(200);

});

这是代码所在的网站：

http://www.klodel.com/cleandev/index.php?page=aboutpage

这是小提琴：

http://jsfiddle.net/yjkz3wyx/

Answer 1

在＆＃34; animate＆＃34;之前添加方法＆＃34;停止＆＃34 ;.

$(".navigation").delay(300).mouseenter(function()
{
    $('.navigation').delay(300).stop().animate({ width: "285px" }, 200);

    $('body').delay(300).stop().stop().animate({ left: "285px" }, 200);

    $('.menubutton').delay(300).stop().animate({ left: "300px" }, 200);

    $('.navigation p').delay(300).stop().show(200);

});

$(".navigation").delay(300).mouseleave(function()
{
    $('.navigation').delay(300).stop().animate({ width: "62px" }, 200);

    $('body').delay(300).stop().animate({ left: "62px" }, 200);

    $('.menubutton').delay(300).stop().animate({ left: "77px" }, 200);

    $('.navigation p').delay(300).stop().hide(200);

});

Answer 2

下面的部分显示在＆＃34;序列＆＃34;中执行动画。，利用.animate()的complete回调。在mouseenter，mouseleave上清空.queue();停止排队＆＃34;排队＆＃34; inprogress

上可能event的动画

尝试

$(".navigation").mouseenter(function() {
    // empty `queue` before
    // starting `mouseenter` animation
    $('.navigation').queue("fx", [])
    .animate({ width: "285px" }, 200
    , function() {
      $('body').animate({ left: "285px" }, 200
      , function() {
        $('.menubutton').animate({ left: "300px" }, 200
        , function() {
          $('.navigation p').delay(300).show(200);
        })              
      });
    })
});

$(".navigation").mouseleave(function() {
    // empty `queue` before
    // starting `mouseleave` animation
    $('.navigation').queue("fx", [])
    .animate({ width: "62px" }, 200
    , function() {
      $('body').animate({ left: "62px" }, 200
      , function() {
        $('.menubutton').delay(300).animate({ left: "77px" }, 200
        , function() {
          $('.navigation p').delay(300).hide(200);
        })
      }}
    })
});

jsfiddle http://jsfiddle.net/guest271314/yjkz3wyx/1/

在鼠标进入/离开事件中防止动画“垃圾邮件”

2 个答案: