jQuery Fading Effect

Question

Я не смог найти точно ответ на мой вопрос.

This это мои кнопки, созданные с помощью спрайтов css. Ты можешь видеть. Когда мышь, цвет фона меняется на белый (непрозрачность 15% и фон прозрачный).

Я хочу добавить эффект jQuery к этой кнопке. При наведении мыши фоновое изображение будет медленно изменяться. И медленно поворачивается.

Я пытаюсь this. Фоновое изображение меняется, но не медленно.

Answer 1

проблема решена с помощью этого кода:

$('#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

Одно из решений здесь является одушевленным() эффект. Этот эффект изменяет одно или несколько свойств css во время анимации.

К сожалению, стандартная функция JQuery работает только с чисто числовыми значениями, поэтому цвет фона не может быть изменен.

К счастью, JQuery UI поставляется с расширенной функцией анимации, способной изменять цвет фона.

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