Question

http://jsfiddle.net/B2rdD/3/

I’ve Created 25 buttons using HTML and I have written jquery code such a way when user will rapidly click any of button all the buttons get glow at once but now the problem in above code is when i click a button for the first time it glows all 25 buttons but in second time it’s not happening.

my aim is if i click any of buttons quickly all buttons should glow then again for next button quickly

can anybody help me to do this ?

Answer 1

EDITED for final fix: http://jsfiddle.net/B2rdD/29/

var $button = $(':button');

$button.click(function() {

    $button.stop(true,true).animate({

        'background-color': '#ADDFFF',
        opacity: 0.4

    }, 500, function() {

        $button.animate({

            'background-color': '#6DA6E2',
            opacity: 1

        }, 500) 

    });

});

$button.hover(function() {

    $(this).css({'background-color' : '#FFFFFF', 'color' : '#6DA6E2'});

}, function(){

    $(this).css({'background-color' : '#6DA6E2', 'color' : '#FFFFFF'});

});

First of all, I modified your inputs to all have unique id’s, just for consistency’s sake. I also modified your css a little. Now the jQuery I re-factored and added the hover technique. First of all, you want to manage the animations. You don’t want them queuing up every time the user clicks a button, hence the .stop(true,true). The first true says to clear the queued animations and the second true tells it to jump to the end of the animation. As far as the hover, that’s just a straightforward .hover() method.