jQuery pulsate effect

V Neal picture V Neal · Jul 9, 2012 · Viewed 20.3k times · Source

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

Answer

Zoltan Toth picture Zoltan Toth · Jul 9, 2012

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 );
    }
});