鼠标悬停时图像抖动

Question

我试图在鼠标悬停时使图像抖动，我让它抖动，但它似乎经常抖动，而不是鼠标悬停时。

vibrate.js (使用vibrate插件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还用于触发间歇性的抖动周期。

从开始，只需删除对doVibration()的setInterval()调用，即可消除无休止的间歇性抖动。然后你可以设置你希望它在悬停时振动多长时间(你不想让它在有人悬停的时候在整个上振动...你是?那会很烦人)

将你想要振动的东西放在一个div中，并用触发振动。悬停的好处是，如果用户将鼠标停在div上，鼠标输入和鼠标离开时都会振动。

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

如果你只想让它振动一次，那就使用

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

当您调用.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/