1

我的.shake()效果是为我提供跨多个浏览器的业务。例如，在 Chrome 中，如果我快速悬停，我会遇到队列堆积问题。如果我尝试.stop()在我的摇晃效果之前实现，元素将开始向下摇晃，然后在动画未完成且元素完全不合适的情况下挂在那里。在 IE 中，动画不止一次触发（即使我没有快速进出悬停）。烦人的是，如果我将鼠标放在链接上，它会一遍又一遍地触发动画。

我尝试过使用 .stop() 及其真/假参数的不同变体。我还尝试在动画的每个步骤上使用 queue:false 。我什至尝试将 .shake 效果与 times:0 放在函数的 mouseleave 部分（结果很有趣）。不知道接下来要尝试什么。

我的代码在下面，但这里有一个链接到有抖动问题的菜单。

$(document).ready(function () {
    $('.shake').hover(function () {
        $(this).animate({
            'color': '#fc0'
        }, 150).effect('shake', {
            times: 1,
            distance: 12,
            direction: 'down'
        }, 50);
    }, function () {
        $(this).animate({
            'color': '#8a600f'
        }, 500);
    });
4

1 回答 1

1

我的第一个想法是.stop(true,true)在 each 之前添加.animate()，但你说你已经尝试过了。

您可以测试该元素当前是否为动画，并且仅在需要时排队一个新动画：

$('.shake').hover(function() {
    var $this = $(this);
    if (!$this.is(":animated")) {
       $this.animate({
            'color': '#fc0'
       },150).effect(
            'shake', {
            times:1,
            distance:12,
            direction: 'down'
       }, 50 );
    }
}, function () {
    $(this).animate({
       'color': '#8a600f'
    },500); 
});

有关更多信息，请参阅:animated选择器 doco。

于 2012-06-05T03:28:43.163 回答