stuck with fadeTo

Question

I am trying to fadeIn/fadeOut my hyperlinks. I have used fadeTo() as opposed to fadeOut seeing that fadeOut gets rid of the hyperlink. With fadeTo, that is not the case, the hyperlink is still there but with a very low opacity value. I was wondering if it was possible to fade out the a.active background and still be able to see the text and the underlying background of the body

var fade_to = function() {      
    $("a.active").fadeTo("slow", 0.0001);
};

$(document).ready(function() {  
    $("a.active").css("display", "none").fadeIn(2000);
    var intervalId = window.setInterval(fade_to, 5000);
});
a.active {
    background: #ff0000;
    width: 246px;
    height: 47px;
    padding-top: 3px;       
    color:  #ffffff;
}
body {
    background: #000000
}  

Answer 1

The answer to this question should be just about the same as the answer to this question; which pertains to doing the same thing with a <span/> element.

Answer 2

If I understand you correctly, you need to fade the background colour to include an opacity, so from something like rgba(255,0,0,1) to rgba(255,0,0,0). That won't work in older browsers, as they don't understand rgba colours, but for any current browser, it will be fine. jQuery doesn't understand how to animate colours, so you'll need to use something like this: http://roxority.com/sharepoint-zen/jquery-color-animations-adding-rgba-alpha-channel-support.html in conjunction with jQuery.

If you really want to do this, using CSS transitions is likely a better choice, as they are supported in almost every place that rgba is.

Answer 3

You could remove the a.active background completely or set it to transparent.

This might do what you want:

$("a.active").css("background", "none").fadeTo("slow", 0.0001);

Or

$("a.active").css("background", "transparent").fadeTo("slow", 0.0001);

Both would have the same effect, but would not fade the background out.

This is an another question which mentions fading backgrounds. How do I animate a background color to transparent in jQuery?

This might help you more.