Saturday, June 7, 2014

Jquery shake effect - part 2

Hurrey 100th post , and again on Jquery :)


Jquery shake effect is very popular & more searchable topic now a days.

Long back i had written a post on jquery shake effect. this is my part 2 post where here I'm going to explain what all method and what option you may find in
JRumble plugin
 
You must have seen that vibrant, rotate, shake and many other elements of effects. using css and other scripting language you can create more eye catch able effects.

JRumble is new plugin which has more elements on effects. it also a good plugin with hover and direction effect.

Below are few objects


  $('imgName').jrumble();
  // you may stop the elements like this way
  $('imgName').trigger('stopRumble');


You many even customize this options with below attributes:


Rotation : set the range , default is 1


Speed : set  frequency or speed between the two movements


X : set horizontal pixels


Y : set vertical pixels


and there are many other elements. 


The below code shows the example along with basic functionality.




$(document).ready(function() {
    $('ImageName').jrumble({
        y:4,
        x:3,
        rotation: 10,
    speed:500,
    opacity:100
    });

    $('ImageName').hover(function() {
        $(this).trigger('startRumble');
    }, function() {
        $(this).trigger('stopRumble');
    });
});​



See the below example :