jquery-navigator-vibrate

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().

Constant

Default

With configuration: { time: 100 }

With configuration: { time: 2000 }

Callback

You can pass a callback onVibrateComplete to be called when it's done.

{
  time: 1000,
  onVibrateComplete: function () {
    window.alert('Done!')
  }
}

List of numbers

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! 🆘');
  }
}

Custom event

The following runs on touchstart

{ event: 'touchstart' }

Pulse

With configuration:

{
  time: 500,
  style: 'pulse',
  pulseCount: 4,
  pulseInterval: 1000
}

With configuration:

{
  time: 200,
  style: 'pulse',
  pulseCount: 20,
  pulseInterval: 100
}

Callback

You can pass a callback onVibrateComplete to be called when it's done.

{
  time: 500,
  style: 'pulse',
  onVibrateComplete: function () {
    window.alert('Done!')
  }
}

Download on Github