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

Militarism

id suggest looking through this question #191060 – Kabuki

Answer 1

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

Weber

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? – Militarism

I'm not sure you can animate gradients - https://mcmap.net/q/392284/-webkit-support-for-gradient-transitions/1499781 and https://mcmap.net/q/109931/-css3-animation-with-gradients-duplicate/1499781 – Weber