Question

这对某些人来说可能很容易。我喜欢这个插件代码，当鼠标移过元素时，触发一个元素，将元素摆动3或4次（或指定的任何东西），然后停止..然而它只是一直触发

这里是小提琴： http://jsfiddle.net/ZKVMk/7/

我正在使用这个小小的wiggle插件： http://labs.wondergroup.com/demos/mini-ui/index.html

似乎该插件只是让mouseenter保持活跃状态。

思路：

以某种方式将调用移到mouseenter以外的摆动函数，所以只触发一次？
利用插件的回调函数告诉mouseenter它应该停止吗？
以某种方式合并bind（）或unbind（）？

非常感谢！

Answer 1

尝试输入此内容

$('#tata').mouseout(function() {        
    $(this).stop();
});

这将停止所有动画，同时允许当前动画完成

Answer 2

问题在于，当移动元素时，它会在Firefox和IE中重新激活MouseEnter事件，因此解决此问题的最简单方法（当然是恕我直言）只是放入一个可以重置的变量，以防止wiggle方法被多次调用。

$(function() {
    var wiggled = false;

    $('#tata').mouseover(function() { 
        if(!wiggled) {
            $(this).wiggle({
                speed: 60,
                wiggles: 3,
                travel: 5,
            });
            //output
            var el = $('#output');
            var n = + el.text();
            el.text(++n);

            wiggled = true;
        }
    }).mouseout(function(e) {        
        wiggled = false;
    });
});

更新：我应该补充一点，我只能在FF中测试它，IE和Chrome可能会有不同的行为，但我不希望它们。

由于Wiggle插件，Mouseenter保持射击

2 个答案: