(original) (raw)

The Vibration API is an API specifically made for mobile devices as they are thankfully the only devices that have a vibrate function. The API allows developers to vibrate a device (in a pattern) for a given duration.

This plugins allow you to use the API in an easy way together with jQuery.

$("#example-one .button").vibrate(); 

Example One

Vibrate for 50ms on all .button in .example.one on click

Try It!

$("#example-two .button").vibrate("short"); 

Example Two

Vibrate for 20ms on click

Try It!

var item = $("#example-three .button");
// Either of these
item.vibrate("medium");
item.vibrate("default");
item.vibrate(50);

Example Three

Vibrate for 50ms on click

Try It!

$("#example-four .button").vibrate("long"); 

Example Four

Vibrate for 100ms on click

Try It!

$("#example-five .button").vibrate({
 duration: 2000,
 trigger: "touchstart"
});

Example Five

Keep vibrating whilst touching (up to 2000ms)

Try It!

$("#example-six .button").vibrate({
 pattern: [20, 200, 20]
});

Example Six

Vibrate twice.

Try It!

$(".example-long .button").each(function() {
 <span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mo stretchy="false">(</mo><mi>t</mi><mi>h</mi><mi>i</mi><mi>s</mi><mo stretchy="false">)</mo><mi mathvariant="normal">.</mi><mi>v</mi><mi>i</mi><mi>b</mi><mi>r</mi><mi>a</mi><mi>t</mi><mi>e</mi><mo stretchy="false">(</mo><mi>p</mi><mi>a</mi><mi>r</mi><mi>s</mi><mi>e</mi><mi>I</mi><mi>n</mi><mi>t</mi><mo stretchy="false">(</mo></mrow><annotation encoding="application/x-tex">(this).vibrate(parseInt(</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1em;vertical-align:-0.25em;"></span><span class="mopen">(</span><span class="mord mathnormal">t</span><span class="mord mathnormal">hi</span><span class="mord mathnormal">s</span><span class="mclose">)</span><span class="mord">.</span><span class="mord mathnormal" style="margin-right:0.03588em;">v</span><span class="mord mathnormal">ib</span><span class="mord mathnormal" style="margin-right:0.02778em;">r</span><span class="mord mathnormal">a</span><span class="mord mathnormal">t</span><span class="mord mathnormal">e</span><span class="mopen">(</span><span class="mord mathnormal">p</span><span class="mord mathnormal">a</span><span class="mord mathnormal">rse</span><span class="mord mathnormal" style="margin-right:0.07847em;">I</span><span class="mord mathnormal">n</span><span class="mord mathnormal">t</span><span class="mopen">(</span></span></span></span>(this).text(), 10));
});

How Long is Long Enough?

If you're not sure how long the haptic feedback should be. You can experiment with various timespans. Try all of these buttons out a mobile device. Anything above 100ms seems to long for me.

$("#example-checkbox .checkbox").vibrate({
 pattern: [5, 200, 20]
});

Check Boxes

Another good use case is check boxes.