Question

I’m trying to make an easing/fading effect on tabs through jQuery. How would I add an easing effect to my existing code. Also, how could I add two css classes so the background changes color along with the color itself? Thank you.

Jquery:

$(document).ready(function() {

        var origColor = $("#links-top-contact a").css("color");

        $("#links-top-contact a").hover(function() {

            $(this).css({color:'blue'});

        },function() {

            $(this).css({color:origColor});

        });

    })

;
CSS

#links-top-contact a{
    color:#fff;
    font-size:30px;
    text-decoration:none;
    border:1px solid blue;
    padding:-5px 10px 10px 10px;
    margin-top:20px;
    margin-left:20px;
    border-radius:25px;
    -moz-border-radius:25px;
    -webkit-border-radius:25px;
    -khtml-border-radius:25px;
    background-color:red;
    }

HTML:

<br/><div id="links-top-contact"><a href="#">yo</a></div>

This is the jsFiddle.

Answer 1

How about jquery color plugin? Here you can find an example of how it works.

I updated your jsFiddle so you can see it working.

In your example it will be something like this:

var origColor = $("#links-top-contact a").css("background-color");

$("#links-top-contact a").hover(function() {
    $(this).animate({
        backgroundColor: 'blue'
    }, 500);
}, function() {
    $(this).animate({
        backgroundColor: origColor
    }, 500)
});