jQuery pulsate effect

Question

Hoping someone can give me some pointers. I'm trying to add a 'pulsate' effect onto a div after a button is clicked.

The following script I've written is fine and does work - however I'd ideally like it to alternate between background colours rather than fading the div out completely.

Am I using the wrong effect? Or is there a way of combining a pulse and highlight perhaps?

$(document).ready(function() {
    $("li#emailSellerLink a").click(function(){
        $("#contactColumn").effect( "pulsate", {times:3}, 5000 );
    });
});

Thanks

id suggest looking through this question http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor — Jon Taylor, Jul 09 '12 at 15:37

score 17 · Accepted Answer · answered Jul 09 '12 at 16:28

17

You can use the .animate() function - http://jsfiddle.net/Fe8Jy/

$("a").click(function(e) {
    e.preventDefault();
    for (var i = 0; i < 3; i++ ) {
        $("#contactColumn")
            .animate( { backgroundColor: "#f00" }, 2000 )
            .animate( { backgroundColor: "transparent" }, 2000 );
    }
});

answered Jul 09 '12 at 16:28

Zoltan Toth

46,981
12
120
134

I'd ideally like to use CSS3 gradients for the background colour, what would be the best way do do that? Changing the backgroundColor to CSS with all my colour rules OR would it be neater to do it via a toggle class? – V Neal Jul 09 '12 at 16:44
I'm not sure you can animate gradients - http://stackoverflow.com/q/3790273/1499781 and http://stackoverflow.com/q/5654510/1499781 – Zoltan Toth Jul 09 '12 at 17:53

jQuery pulsate effect

1 Answers1