This plugin leverages window.navigator.vibrate()
to add vibrations to your elements.
It supports both constant and pulse variants.
You call the plugin like this:
$('.js-vibrating-btn').vibrate({
time: 300,
style: 'constant',
event: 'click',
pulseCount: 3,
pulseInterval: 300,
onVibrateComplete: function () {}
});
Note: At the time of publishing, browser support is limited to Chrome, Edge, and Android browsers.
Safari and Safari on iOS do not currently support window.navigator.vibrate()
.
Default
With configuration: { time: 100 }
With configuration: { time: 2000 }
You can pass a callback onVibrateComplete
to be called when it's done.
{
time: 1000,
onVibrateComplete: function () {
window.alert('Done!')
}
}
The time option can also support a list of integers.
{
time: [
100, 30, 100, 30, 100,
30, 200, 30, 200, 30, 200,
30, 100, 30, 100, 30, 100
],
onVibrateComplete: function () {
window.alert('That was SOS in Morse code! 🆘');
}
}
The following runs on touchstart
{ event: 'touchstart' }
With configuration:
{
time: 500,
style: 'pulse',
pulseCount: 4,
pulseInterval: 1000
}
With configuration:
{
time: 200,
style: 'pulse',
pulseCount: 20,
pulseInterval: 100
}
You can pass a callback onVibrateComplete
to be called when it's done.
{
time: 500,
style: 'pulse',
onVibrateComplete: function () {
window.alert('Done!')
}
}