jQuery Fading Effect

Question

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

Это мои кнопки, созданные с помощью спрайтов CSS.Ты можешь видеть.При наведении курсора цвет фона меняется на белый (непрозрачность 15% и прозрачность фона).

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

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

Answer 1

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

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

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

Answer 2

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

$('#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");
   });
});