jQuery Fading Effect

Question

I couldn't find exactly answer of my question.

This is my buttons which created with css sprites. You can see. When mouseover , background color changing to white (opacity 15% and background transparent) .

I want to add a jQuery effect to this button. When mouseover , background-image will change slowly. And turns white slowly.

I'm trying this . Background-image changing but not slowly.

Answer 1

problem solved with this code :

$('#footerSocialLinks a').hover(function() {

    $(this).fadeTo(150, 1, function() {

        $(this).css("background-position", "0 -37px");
   });
}, function() {
    $(this).fadeTo(250, 1, function() {

        $(this).css("background-position", "0 0px");
   });
});

Answer 2

One solution here is the animate() effect. This effect changes one or more css properties over the duration of the animation.

Unfortunately, the standard JQuery function only works with purely numeric values, so background color can't be changed with it.

Fortunately, JQuery UI comes with an extended animate function that is capable of changing the background color.

$("#footerSocialLinks").children().hover(function(){
          $(this).animate({"backgroundColor":"white"},500);},
    function(){
          $(this).animate({"backgroundColor":"#999"},500);});