jQuery: shake effect

jQuery UI provides, among other effects, the shake effect. This effect simply moves an element horizontally or vertically using the parameters specified in the effect call options. As you will see, this effect mimics a basic feature that we can find in most Flash-driven websites. Its syntax is as follows:

element.effect('shake', options, speed);

where options is an object literal containing the effect's options and speed is a time length expressed in milliseconds. The effect's options include:

• times: specifies how many times an element must be shaken
• distance: specifies the distant between element's positions (in pixels)
• direction: specifies the direction of the shaking effect (horizontal or vertical)

Let's make an example:

$('#navigation li').each(function() {
 
   var $li = $(this);
   var $a = $li.find('a');
   
   $a.hover(function() {
   
     $a.effect('shake', {times: 2, distance: 5}, 300);
   
   }, function() {
   
   
     $a.effect('shake', {times: 2, direction: 'down', distance: 5}, 300);
   
   });
 
 
});

As you can see, the link of each menu item is first shaken horizontally and then vertically. You can see a demo below.

Demo

Live demo

References

jQuery UI documentation