Trying to get a fallback for CSS3 transitions using jQuery

Question

Possible Duplicate:
Special color transition effect with pure jQuery animation // no ui or other libary

I think this code should be it, but it's not working. I can tell it's changing the colors, but it's not fading (like CSS3 transitions). Please help. My code:

$(document).ready(function(){
    $("#nav-wrap ul li a").mouseover(function(){
        $(this).css("color","#444");
    });

    $("#nav-wrap ul li a").mouseout(function(){
        $(this).css("color","#999");
    });
});

score 2 · Accepted Answer · 2012-10-14T02:06:24.540

2

$(document).ready(function(){
    $("#nav-wrap ul li a").hover(function(){
            $(this).stop().animate({color:'#444'}, 300);
        }, function () {
            $(this).stop().animate({color:'#999'}, 100);
        }
    )}
});

This code require jQuery UI.

edited Oct 14 '12 at 02:06

answered Oct 14 '12 at 01:35

2

You know, animating colors do not work without the UI/UI.color module. You could at least add a note about it before people start complaining and downvoting. `=]` – Fabrício Matté Oct 14 '12 at 01:46

score 1 · Answer 2 · answered Oct 14 '12 at 01:34

1

What you need is to animate() the element, not simply to change the color value in css. Here is a reference on how to do it.

answered Oct 14 '12 at 01:34

Konstantin Dinev

34,219
14
75
100

Trying to get a fallback for CSS3 transitions using jQuery

2 Answers2