图像在鼠标上摇晃

Question

我正试图让鼠标上的图像震动，我让它摇晃但它似乎不断摇晃而不是鼠标悬停。

vibrate.js（使用振动插件http://andreaslagerkvist.com/jquery/vibrate/）

jQuery(document).ready(function() {

    jQuery(".bottles").mouseover( function() {

        // configurations for the buzzing effect. Be careful not to make it too annoying!
        var conf = {
                frequency: 6000,
                spread: 7,
                duration: 700
            };

        // this is the call we make when the AJAX callback function indicates a login failure 
        jQuery(this).vibrate(conf);
    });

});

HTML

<div id="bottle">
<img class="bottles" src="/images/_garlic.png">
</div>

如何阻止该功能摇晃？

Answer 1

它不断震动的原因是该插件被设置为创建一个间歇性震动的元素....永远。使用 setInterval 生成摇晃。 setInterval也用于触发间歇性摇动时间。

在 the plugin by Andreas Lagerkvist you linked to 中工作，只需删除对doVibration（）的setInterval（）调用，即可删除永无止境的间歇抖动。然后你可以设置你想要它在悬停时振动多长时间（你不希望它振动整个时间有人徘徊......你呢？这很烦人）

将想要在div中振动的内容用 .hover() 触发振动。悬停的优点是，如果用户将鼠标停在div上，它会在mouseenter和mouseleave上振动。

$('#jquery-vibrate-example').hover(function() {$(this).vibrate();});

如果您只想使用 .mouseenter()

，只需振动一次

$('#jquery-vibrate-example').mouseenter(function() {$(this).vibrate();});

的 jsFiddle example

当您致电.vibrate()时，您可以将速度，持续时间和传播（我移除频率）作为对象文字的一部分传递，以微调振动：$(this).vibrate({"speed":100,"duration":800,"spread":5});。 speed越大，抖动越慢，因为speed直接用于摇动的setInterval()。另外两个是自我解释的：

jQuery.fn.vibrate = function (conf) {
    var config = jQuery.extend({
        speed:        30, 
        duration:    1000,  
        spread:        3
    }, conf);

    return this.each(function () {
        var t = jQuery(this);

        var vibrate = function () {
            var topPos    = Math.floor(Math.random() * config.spread) - ((config.spread - 1) / 2);
            var leftPos    = Math.floor(Math.random() * config.spread) - ((config.spread - 1) / 2);
            var rotate    = Math.floor(Math.random() * config.spread) - ((config.spread - 1) / 2);

            t.css({
                position:            'relative', 
                left:                leftPos + 'px', 
                top:                topPos + 'px', 
                WebkitTransform:    'rotate(' + rotate + 'deg)'  // cheers to erik@birdy.nu for the rotation-idea
            });
        };

        var doVibration = function () {
            var vibrationInterval = setInterval(vibrate, config.speed);

            var stopVibration = function () {
                clearInterval(vibrationInterval);
                t.css({
                    position:            'static', 
                    WebkitTransform:    'rotate(0deg)'
                });
            };

            setTimeout(stopVibration, config.duration);
        };
        doVibration();
    });
};

---

注意：该插件会将您的摇动项目的定位更改为relative ...因此，如果您将其应用于最初的absolute，您将获得有趣的结果定位元素。

Answer 2

看一下这个页面的来源:(查看源代码然后向下滚动）

http://www.bennadel.com/resources/demo/jquery_vibrate_plugin/