jQueryを使ってspanタグの背景色をフェード

StackOverflow https://stackoverflow.com/questions/734068

質問

私は、変更が発生した際に強調することはJQueryを使用してspanタグの背景色をフェードしようとしています。私は、コードをクリックハンドラ内で次のようにいろいろ書いだろう考えていたが、私はそれが働くように見えることはできません。私が間違っていたところ、あなたは私を見ることができますか？ おかげラスます。

$("span").fadeOut("slow").css("background-color").val("FFFF99");
<時間>

これは良いでしょうが、今ではあまりにもspanタグの背景色とspanタグのテキスト値の両方をフェード。私は、背景色をフェードし、目に見えるテキストを残すようにしようとしています。それを行うことができますか？

役に立ちましたか？

解決

OH、私はあなたが色をフェードしたかった気づいていませんでした！ OK、あなたはjQueryの色のプラグインをチェックアウトする必要があります：

http://plugins.jquery.com/project/colorする

https://github.com/jquery/jquery-color/する

そしてここでjQueryのドキュメントサイトの別の有用な部分です

http://docs.jquery.com/Release:jQuery_1.2 /エフェクト＃Color_Animationsする

私は実際にこれがそう、私はあなたのコードを与えることをしようとはしませんやったことがないが、私は色のプラグインはあなたが必要な機能を提供します想像します。

他のヒント

背景をフェードアウトする純粋jQのを使用すると、プラグインなしで動作しない場合は、

、CSS3でこれを行うには（徐々に強化されていないが）巧妙な方法があります。

この機能は、CSSを経由して、特定の要素に「遷移」属性を適用します 次に、要素はCSSがフェードに背景色を与えられている。

これが波のようになりたい場合は（「ここを見て！」）、半秒の遅延の後に、関数が戻って白に要素を回すためにキューに登録されます。

本質的jQのはただ一つの色へ、次いでバック白の上の素子を点滅します。 CSS3は、フェージングの世話をします。

//reusable function to make fading colored hints
function fadeHint(divId,color) {
    switch(color) {
        case "green":
        color = "#17A255";
        break;

        case "blue":
        color = "#1DA4ED";
        break;

        default: //if "grey" or some misspelled name (error safe).
        color = "#ACACAC";
        break;
    }

    //(This example comes from a project which used three main site colors: 
    //Green, Blue, and Grey)

    $(divId).css("-webkit-transition","all 0.6s ease")
    .css("backgroundColor","white")
    .css("-moz-transition","all 0.6s ease")
    .css("-o-transition","all 0.6s ease")
    .css("-ms-transition","all 0.6s ease")
    /* Avoiding having to use a jQ plugin. */

    .css("backgroundColor",color).delay(200).queue(function() {
        $(this).css("backgroundColor","white"); 
        $(this).dequeue(); //Prevents box from holding color with no fadeOut on second click.
    }); 
    //three distinct colors of green, grey, and blue will be set here.
}

これを試してみてください。

    $(this).animate({backgroundColor:"green"},  100);
    $(this).animate({backgroundColor:"white" },  1000);

答えることが遅れて、しかし、あなたの答えにまっすぐ溶液であってもよい。

 $('span').css('background-color','#<from color>').animate({backgroundColor: '#<to color>'},{duration:4000});

シンプル。 jqueryUIプラグイン、サードパーティ製のツールとすべての必要がありません。

私はプラグインを使用したいのdidnt だから、背景をフェードインすると出て、私はその背景が色あせ持っているのdivクラスのthatsのためにこれを含める

.div-to-fade {
    -webkit-transition:background 1s;
    -moz-transition:background 1s;
    -o-transition:background 1s;
    transition:background 1s
}

ボタンクリックであるjQueryの

$('.div-to-fade').css('background', 'rgb(70, 70, 70)');
setTimeout(function(){$('.div-to-fade').css('background', '')}, 1000);

これは、背景光グレー色と戻しORIG色にフェードします 私はこれが一因と願っています。

あなたはspanタグにフェードアウトを呼ん

それです。背景フェードアニメーションを取得するためにあなたが使用する必要があります：

$('span').animate({'backgroundColor' : '#ffff99'});

mishacで指摘したように。もう一つの方法は、このようなものになる可能性があります：

$("span").fadeTo(0.5,"slow", function () {
  $(this).css("background-color", "#FFFF99");
  $(this).fadeIn("slow");
});

上記のコードはバックグラウンドとフェードインを変更し、50％の全体のスパンタグにフェードアウトします。それはあなたが探していたものではありませんが、他のjQueryプラグインから依存することなく、decetアニメーションを作成します。）

最新のjQuery UIの事業では、ほとんどのオブジェクトに背景色変換を行うことができます。 ここを参照してください： http://jqueryui.com/demos/animate/する

男は画像を明らかにするために、ロールオーバーで背景透明ことについて尋ねるためとして、通常のjQueryの画像ロールオーバーの人はNAV画像を切り替えるために使用しているようなのようにそれを構築する方が簡単ではないでしょう？

あなたはこの構文を使用することをお勧めします。

$("span").fadeOut("slow").css("background-color", "#FFFF99");

これは私がホバーと私のリストのためにそれを固定する方法であります

CSSます：

ul {background-color:#f3f3f3;}
li:hover {background-color: #e7e7e7}

jQueryの：

$(document).ready(function () {
    $('li').on('touchstart', function () { $(this).css('background-color', ''); });
    $('li').on('touchend', function () { $(this).css('background-color', 'inherit'); });
});
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top