jquery hover animate image (once)

Question

I came across this post (http://stackoverflow.com/questions/10665918/jquery-animate-shake-on-hover) which is almost what I'm looking for, and this jsfiddle (http://jsfiddle.net/g6AeL/222/), but I just need the vibrate function to happen once when you hover on the item instead of continuously vibrating while you're hovering over the item.

Could someone help me with making it just do it once when you hover over the item?

Here's the javascript from the jsfiddle.

$(function() {
  var interval = 10;
  var duration= 1000;
  var shake= 3;
  var vibrateIndex = 0;
  var selector = $('.box'); /* Your own container ID*/
    $(selector).each(function(){
        var elem = this;
        $(this).hover( /* The button ID */

        function(){ 
            vibrateIndex = setInterval(function(){
                vibrate(elem); 
            }, interval);
        },
        function(){ 
            clearInterval(vibrateIndex);
            $(this).stop(true,false)
                .css({position: 'static', left: '0px', top: '0px'});
        }
    );
    })

    var vibrate = function(elem){
        $(elem).stop(true,false)
        .css({position: 'relative', 
        left: Math.round(Math.random() * shake) - ((shake + 1) / 2) +'px', 
        top: Math.round(Math.random() * shake) - ((shake + 1) / 2) +'px'
        });
    }
});

Answer 1

You can try adding a setTimeout to stop the shaking after sometimes.

Maybe something like this:

$(selector).each(function(){
    var elem = this;
    var vibrateIndex;
    var timeoutIndex;
    $(this).hover( /* The button ID */

    function(){ 
        vibrateIndex = setInterval(function(){
            vibrate(elem); 
        }, interval, 0);
      timeoutIndex = setTimeout(function(){clearInterval(vibrateIndex)},1000);
    },
      function(){
        clearInterval(vibrateIndex);
       clearTimeout(timeoutIndex); 
      }
    );
})

check out the jsfiddle

Answer 2

You can add a counter like so:

var Counter = 0

var vibrate = function(elem){
  if (Counter <= 100) {
    Counter++;
    $(elem).stop(true,false)
    .css({position: 'relative', 
    left: Math.round(Math.random() * shake) - ((shake + 1) / 2) +'px', 
    top: Math.round(Math.random() * shake) - ((shake + 1) / 2) +'px'
    });
  }
}

It'll vibrate for as many times as you want and then stop. You'll need to reset the counter on some event that you can choose like mouseout, etc.

http://jsfiddle.net/g6AeL/226/

Answer 3

ok my take to start making a plugin of it :

$.fn.extend({

   randShake : function(duration, shakeInt,shake){
              return $(this).stop(true,false)
                        .css({
                             left : Math.round(Math.random() * shake) - ((shake + 1) / 2) +'px', 
                             top : Math.round(Math.random() * shake) - ((shake + 1) / 2) +'px'

                         }).vibrate(duration, shakeInt,shake);
      },

     vibrate : function(duration, shakeInt,shake) {
       if (duration>shakeInt) setTimeOut(function(){

                          $(this).randShake(duration-shakeInt, shakeInt,shake);

                           },shakeInt);

             }
            return this;
          }      
       });


      jQuery(function($,undefined) {

          $(selector).on("mouseover",function(){
              $(this).vibrate(duration, shakeInt,shake);
                 });

       })

haven't tested it but the idea seems to me more in the spirit of jquery than original code