Shake the image over the mouse

Question

I try to make the image shake on the mouse, I got it to shake, but it seems to shake constantly, not on the mouse.

vibrate.js (uses the vibrating plugin 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>

How can I stop this function from shaking?

Answer 1

The reason it constantly shakes is because the plugin is set up to create an element that swings unsteadily ... forever. Shaking is done using setInterval . setInterval is also used to trigger intermittent shaking periods.

Andreas Lagerkvist, , , setInterval() doVibration(). , , ( , , - ... ? )

, div, . hover(). , , , div.

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

, , . mouseenter()

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

jsFiddle

.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 [e-mail] 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 ly.

Answer 2

: ( , )

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