jQuery animate() pulse() not working

Question

In the following code, the animate() function in click() works. However, animate() or pulse() (when uncommented) in mouseenter() does not work either. The pulse() function is provided by Jarrod Overson...

http://jarrodoverson.com/static/demos/jquery.pulse.html

    sectionTitle = $j(this).find(".sectionTitle");
    sectionTitle.click(function(){
    if($j(this).parent().height() == sections[$j(this).parent().attr("id")]["height"]){
        origHeight = sections[$j(this).parent().attr("id")]["origHeight"];
        $j(this).parent().animate({height:origHeight},"slow");
    }else{
        height = sections[$j(this).parent().attr("id")]["height"];
        $j(this).parent().animate({height:height},"slow");
    }
    })
    sectionTitle.mouseenter(function(){
    var properties = { "color" : '#F00' };
  //    $j(this).pulse(properties, 500, 3);
    $j(this).animate({"background-color":'#F00'},"slow");
    })

A live example of my code is here. http://fantasticvisions.net/test/me/

The classs sectionTitle is applied to a number of the H2 elements on the above page. Clicking them will cause the content to expand, using jQuery animate(). However, the mouseenter() fails.

What am I missing here? I have tried a number of other variations on this, and none work. The mouseenter() event does fire, and the code is executed (I have traced this) but the effect never seems to happen.

Answer 1

.animate() is not working because jQuery by itself does not support animation of colors.

If you include jQuery UI, or a color animation plugin, this should work.