'Pulsing' A Border In Javascript/JQuery

I am in the process of applying validation on a web form -one of the things I would like to do is add a pulsing border to the div which contains the erroneous input. This solution

Solution 1:

I've updated the update() function to accept an argument, i, which is then called in the click handler, along with window.clearTimeout():

var addClickHandler = function() {
    $("div").click(function() {
        window.clearTimeout(timer);
        update(0);

    });
};

This does require that the other calls to update() also need to pass the i:

var update = function(i) {
    $("div").css("border-color", 'rgb(' + i + ',' + i + ',' + 0 + ')');
};

JS Fiddle demo.

---

Edited to amend the click-handler to offer a toggle (stop/start) for the animation:

var addClickHandler = function() {
    $("div").toggle(function() {
        window.clearTimeout(timer);
        update(0);

    }, function() {
        anim.go();
    });
};

JS Fiddle demo.

---

Edited for a slightly more context-aware click-handler, this version checks for the existence of the timer variable and, if it isn't found, starts the animation. If it is found then it clears the timeout, sets the timer to false and calls update(0) to reset the borders to black:

var addClickHandler = function() {
    $("div").click(function() {
        console.log(timer);
        if (!timer){
            timer = window.setTimeout(anim.go, 30);
        }
        else {
            window.clearTimeout(timer);
            timer = false;
            update(0);
        }

    });

JS Fiddle demo.

References:

• toggle().
• window.clearTimeout().

Solution 2:

Here's a jQuery UI effect to pulsate the border:

$.effects.borderPulsate = function(o) {
    return this.queue(function() {
        var elem = $(this),
            mode = $.effects.setMode(elem, o.options.mode || 'show'),
            times = (o.options.times || 5),
            duration = o.duration ? o.duration : $.fx.speeds._default,
            isVisible = elem.is(':visible'),
            color = (o.options.color || 'rgb(255,255,0)'),
            startColor = (o.options.startColor || elem.css('border-color') || 'transparent');

        if (!isVisible) {
            elem.show();
        }

        if ((mode == 'hide' && isVisible) || (mode == 'show' && !isVisible)) {
            times--;
        }

        for (var i = 0; i < times; i++) {
            elem.animate({ 'border-color': color }, duration, o.options.easing, function() {
                elem.css( 'border-color', startColor );
            });
        }

        elem.animate({ 'border-color': color }, duration, o.options.easing, function() {
            (o.callback && o.callback.apply(this, arguments));
        });

        elem
            .queue('fx', function() { elem.dequeue(); })
            .dequeue();
    });
};

http://jsfiddle.net/cdeutsch/TjkNd/

Solution 3:

You can change colors on all borders at the same time with borderColor, but you don't need to animate that. You could add a reset method to your object to take care of the whole thing:

var reset = function() {
    i = 0;
    step = 10;
    up = true;
    if(timer) window.clearTimeout(timer);
    timer = null;
    $('#weight').css('borderColor', '#000');
}

Then on your click handler, you call anim.reset() after anim.stop().