jQuery 페이딩 효과

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);});