jquery - jQuery フェード効果

Question

私の質問の正確な答えが見つかりませんでした。

これはCSSスプライトで作成した私のボタンです。あなたが見ることができます。マウスオーバーすると、背景色が白に変わります (不透明度 15%、背景透明)。

このボタンに jQuery 効果を追加したいと思います。マウスオーバーすると、背景画像がゆっくりと変化します。そしてゆっくりと白くなっていきます。

私はこれを試しています。背景画像は変化しますが、ゆっくりではありません。

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

ここでの 1 つの解決策は、animate() 効果です。このエフェクトは、アニメーションの継続中に 1 つまたは複数の css プロパティを変更します。

残念ながら、標準の JQuery 関数は純粋な数値でしか機能しないため、背景色を変更することはできません。

幸いなことに、JQuery UIには、背景色を変更できる拡張アニメーション機能が付属しています。

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