Question

I have following HTML:

<div class="olympics" style="display: block; position: absolute; left: 250px; top: px;">

   <a style="display: inline-block; float: left; height: 20px; margin: 5px;" href="#">Link 1</a>
   <a style="display: inline-block; float: left;  height: 20px; margin: 5px;" href="#">Link 2</a>

 </div>​

and JS:

$('.olympics a').hover(function() {
    $(this).animate({
        backgroundColor: "#aa0000",
        color: "#fff"
    }, 1000);
}, function() {
    $(this).animate({
        backgroundColor: "#fff",
        color: "#aa0000"
    }, 1000);
});​

Any idea why this animation does not work?

jsfiddle demo here: http://jsfiddle.net/Seefeld/NzhxH/13/

Answer 1

Did you include the jQueryUI package in your import? After I added it in your fiddle it’s working

http://jsfiddle.net/NzhxH/19/