About
jQuery Vibrate Plugin is a jQuery component, self-contained, that allows you to have "vibrating" tags in your page, like buttons, DIVs, etc.
It is very simple to use and integrate, and lightweight (only 2.99 kB in minified version)!
Demo
1. Buttons that vibrate when mouse is over
In this basic sample, buttons vibrate when mouse is over (default behaviour)
$('.vibrate').vibrate();
2. Reversed behaviour: button stops when mouse is over
Another sample of a button that vibrates always, but stops when mouse is over
$('.vibrate').vibrate({ reverse:true });
3. Buttons with different vibration speed
You can set the vibration speed in milliseconds (default 50 milliseconds)
$('.vibrate.button5').vibrate({ speed: 10 });
$('.vibrate.button6').vibrate({ speed: 50 });
$('.vibrate.button7').vibrate({ speed: 200 });
$('.vibrate.button8').vibrate({ speed: 500 });
4. Other tags
Other tags can vibrate when mouse is over
$('div.vibrate').vibrate();
$('input[name=input1].vibrate').vibrate({ trigger:"focus" });
$('input[name=input2].vibrate').vibrate();
5. Applying CSS classes (New in vers. 1.1!)
You can apply an optional CSS class when the tag is vibrating and / or when the over effect is applied
/* CSS style */
.buttonVibrate { color: red; }
.button10 { border: none; border-radius: 5px; background: #333; color: #fff; padding: 4px 6px !important; }
.buttonOver { background: #FDDD57; color: #B6580B; box-shadow: 0 0 4px #ccc; }
/* Javascript code */
$('.vibrate.button9').vibrate({reverse: true, vibrateClass: "buttonVibrate", speed: 150 });
$('.vibrate.button10').vibrate({reverse: true, overClass: "buttonOver", speed: 100 });
Documentation
The Vibrate plugin has some configurable options. Below is an example of available options and their defaults:
$('.vibrate').vibrate({
speed: 50, // Vibration speed in milliseconds
trigger: "mouseover", // Triggering event
reverse: false, // Reverse behaviour
overEffect: "stop", // Over effect, see details below
vibrateClass: "", // CSS class applied when vibrating (New in vers. 1.1!)
overClass: "", // CSS class applied when over effect is triggered (New in vers. 1.1!)
})
speed: default value is 50 milliseconds, but can be changed
trigger: it is the triggering event. Default value is "mouseover", another acceptable value is "focus"; other events are not managed
reverse: default value is false; if true, the behaviour will be reversed. E.g., if triggering event is "mouseover", the tag will always vibrate but stop when mouse is over.
overEffect: this is used only when "reverse" parameter is true. The appliable values are "" (empty string), "stop" or "invert". Default value is "stop":
- "stop" (default value): when mouse is over the vibration will be stopped and it will start again when mouse is out;
- "" (empty string): when mouse is over the vibration will continue without stopping;
vibrateClass: name of a CSS class applied when the tag is vibrating, and removed when it stops (default value "")
overClass: name of a CSS class applied when the over effect is triggered, and removed when it ends (default value "")
Download
You can download last version of jQuery Vibrate Plugin clicking on the following links:
Zipped package (2.61 kB)
Vibrate plugin (4.42 kB)
Minified version (2.99 kB)
News
Credits
jQuery is based on jQuery. This page uses also Alex Gorbatchev's Syntax Highlighter.