Tutorial: How to create a simple vibration effect for your form box with jQuery

This effect can be used to validate certain criteria in your form. Other than using highlighter to highlight the error area, we can use a more creativity approach by vibrating that particular input box to alert the user. This tutorial demonstrate a very easy way to understanding how vibration works on the web and how it can be used in your web design.

7 thoughts on “Tutorial: How to create a simple vibration effect for your form box with jQuery

  1. Looks cool.
    However, it doesn't quit if the user double clicks on the submit button.
    So just add a check to see if it running or not.
    This is accomplished by resetting vibrateIndex back to 0, and only starting a new Interval if vibrateIndex doesn't exist.
    Or you could just disable the button until it is finished.


    $('#activate').click( function(){
    if( !vibrateIndex ){
    vibrateIndex = setInterval(vibrate, interval);
    setTimeout(stopVibration, duration);
    }
    });

    var stopVibration = function() {
    clearInterval(vibrateIndex);
    vibrateIndex = 0;
    $(selector).stop(true,false)
    .css({position: 'static', left: '0px', top: '0px'});
    };

    Test out your javascript skills with a simple quiz.
    http://bateru.com/jquery/jquizme2/demo3.html

  2. nice work around Larry! That were some good suggestion to overcome the interval index from overwritten by the second click. There are other ways such as using an array or stack to keep track on the number of index being used and terminated. But yours is cool enough to simplify the process!

Comments are closed.