First Timelapse Experiment Inline Media in Twitter

jQuery Shake Effect

Posted in: javascript, jquery Add comments

I realized today that there was no Shake function for jQuery, a function I miss from scriptaculous. I did some googling to find a plugin but didn’t find much.  I did end up finding a site that referenced a plugin named shakeit() .   My current google searches turn up nothing, but here’s a slightly modified version of the code:


jQuery.fn.Shake = function(){
     this.each(function(init){
          var jqNode = $(this);
          jqNode.css({position: 'relative'});
          for (var x = 1; x < = 3; x++){
               jqNode.animate({ left: -25 },10)
               .animate({ left: 0 },50)
               .animate({ left: 25 },10)
               .animate({ left: 0 },50);
          }
     });
return this;
}

If anyone knows who’s plugin this is, please leave a comment, so I can give them the credit they deserve.

5 Responses to “jQuery Shake Effect”

  1. oppo GOP Says:
    April 3rd, 2008 at 8:32 am

    do `nt work . What is do

    $(”#headerbar”).Shake();

  2. krewenki Says:
    April 8th, 2008 at 11:17 pm

    It works for me. It’s not perfect, but it’s a start. There’s no easing, so it’s a very mechanical style animation.

    Try it on a small element (i’ve been using it on some small div’s.) If you can think of anything to improve it, please share :)

  3. BooshTukka Says:
    May 1st, 2008 at 8:32 am

    Here’s a slightly nicer version, with parameters:

    jQuery.fn.shake = function(intShakes /*Amount of shakes*/, intDistance /*Shake distance*/, /*Time duration*/) {
    this.each(function() {
    var jqNode = $(this);
    jqNode.css({position: ‘relative’});
    for (var x=1; x<=intShakes; x++) {
    jqNode.animate({ left: (intDistance * -1) },(((intDuration / intShakes) / 4)))
    .animate({ left: intDistance },((intDuration/intShakes)/2))
    .animate({ left: 0 },(((intDuration/intShakes)/4)));
    }
    });
    return this;
    }

    And an example of use:

    $(function() {
    $(’#btn’).click(function() {
    $(this).shake(2,10,400);
    });
    });

  4. BooshTukka Says:
    May 1st, 2008 at 8:33 am

    Oops - something got lost in translation (intDuration) - again:

    jQuery.fn.shake = function(intShakes /*Amount of shakes*/, intDistance /*Shake distance*/, intDuration /*Time duration*/) {
    this.each(function() {
    var jqNode = $(this);
    jqNode.css({position: ‘relative’});
    for (var x=1; x<=intShakes; x++) {
    jqNode.animate({ left: (intDistance * -1) },(((intDuration / intShakes) / 4)))
    .animate({ left: intDistance },((intDuration/intShakes)/2))
    .animate({ left: 0 },(((intDuration/intShakes)/4)));
    }
    });
    return this;
    }

  5. BooshTukka Says:
    May 1st, 2008 at 8:38 am

    Sorry, last example:

    jQuery.fn.shake = function(intShakes /*Amount of shakes*/, intDistance /*Shake distance*/, intDuration /*Time duration*/) {
    this.each(function() {
    $(this).css({position:’relative’});
    for (var x=1; x<=intShakes; x++) {
    $(this).animate({left:(intDistance*-1)}, (((intDuration/intShakes)/4)))
    .animate({left:intDistance}, ((intDuration/intShakes)/2))
    .animate({left:0}, (((intDuration/intShakes)/4)));
    }
    });
    return this;
    };
    //example
    $(function() {
    $(’#btn’).click(function() {
    $(this).shake(2, 10, 400);
    });
    });

    Still no easing, but it emulates a failed login on OSX quite nicely :)

Leave a Reply