25

変更が発生したときに強調するために、JQuery を使用してスパン タグの背景色をフェードさせようとしています。クリックハンドラー内のコードは次のようになると思っていましたが、うまく機能しないようです。私がどこで間違ったのか教えてもらえますか？ありがとうラス。

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

その方が良いですが、span タグの background-color と span タグのテキスト値の両方がフェードします。背景色を薄くして、テキストを表示したままにしようとしています。それはできますか？

4

12 に答える 12

16

これは、カラーアニメーションプラグインを使用して実行できます。その後、次のようなことをします

$('span').animate({'backgroundColor' : '#ffff99'});
于 2009-04-09T13:04:45.520 に答える
10

ああ、あなたが色を薄くしたいと思っていたのに気づかなかった！OK、jQueryカラープラグインをチェックする必要があります：

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

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

そして、jQueryドキュメントサイトのもう1つの役立つセクションは次のとおりです。

http://docs.jquery.com/Release:jQuery_1.2/Effects#Color_Animations

私は実際にこれを行ったことがないので、コードを提供しようとはしませんが、カラープラグインが必要な機能を提供すると思います。

于 2009-04-09T13:05:24.227 に答える
10

純粋なjQを使用して背景をフェードアウトすることがプラグインなしでは機能しない場合は、CSS3でこれを行うための賢い（プログレッシブエンハンスされていませんが）方法があります。

この関数は、CSSを介して特定の要素に「遷移」属性を適用します。次に、要素には、CSSがフェードインする背景色が与えられます。

これを波のようにしたい場合（「ここを見てください！」）、0.5秒の遅延の後、要素を白に戻すための関数がキューに入れられます。

基本的に、jQは要素を1つの色に点滅させてから、白に戻します。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.
}
于 2012-02-17T19:14:26.183 に答える
9

これは、jQuery (または任意のライブラリ) と単純な CSS ハックで実行できます。

#wrapping-div {
 position:relative;
 z-index:1;
}
#fadeout-div {
 height:100%;
 width:100%;
 background-color: #ffd700;
 position:absolute;
 top:0;
 left:0;
 z-index:-1
}

HTML:

<div id="wrapping-div">
  <p>This is some text</p>
  <p>This is some text</p>
  <p>This is some text</p>
  <div id="fadeout-div"></div>
</div>

次に、あなたがする必要があるのは次のとおりです。

$("#fadeout-div").fadeOut(1100);

簡単ピージー！これを実際に見てください：http://jsfiddle.net/matthewbj/jcSYp/

于 2012-05-24T18:50:24.753 に答える
4

これを試して

    $(this).animate({backgroundColor:"green"},  100);
    $(this).animate({backgroundColor:"white" },  1000);
于 2010-08-13T13:05:37.987 に答える
3

答えるのが遅いかもしれませんが、あなたの答えに対するまっすぐな解決策です。

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

単純。jqueryUIプラグイン、サードパーティツールなどは必要ありません。

于 2012-04-23T15:14:56.180 に答える
3

プラグインを使用したくなかったので、背景をフェードインおよびフェードアウトするために、背景をフェードさせる div クラスにこれを含めました

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

これにより、背景が明るい灰色になり、元の色にフェードバックします。これが貢献することを願っています

于 2014-02-07T08:56:10.530 に答える
1

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

画像を表示するためにロールオーバーで背景を透明にすることについて尋ねている人については、ナビゲーション画像を切り替えるために使用するような通常のjQuery画像ロールオーバーのように構築する方が簡単ではないでしょうか?

于 2011-01-07T08:24:59.777 に答える
1

そのため、span タグで fadeOut を呼び出します。バックグラウンド フェード アニメーションを取得するには、以下を使用する必要があります。

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

mishac が指摘するように。別の方法は次のようになります。

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

上記のコードは、span タグ全体の 50% にフェードアウトしてから、背景とフェードインを変更します。それはあなたが探していたものではありませんが、他の jquery プラグインに依存することなく deset アニメーションを作成します;)

于 2009-12-21T17:23:27.950 に答える
0

これは、ホバーでリストを修正する方法です。

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'); });
});
于 2012-09-10T10:50:30.183 に答える
0

jQuery UIを使用しない別のソリューションhttps://stackoverflow.com/a/22590958/781695

//Color row background in HSL space (easier to manipulate fading)
$('span').css('backgroundColor','hsl(0,100%,50%');

var d = 1000;
for(var i=50; i<=100; i=i+0.1){ //i represents the lightness
    d  += 10;
    (function(ii,dd){
        setTimeout(function(){
            $('span').css('backgroundColor','hsl(0,100%,'+ii+'%)'); 
        }, dd);    
    })(i,d);
}

デモ: http://jsfiddle.net/5NB3s/3/

于 2014-03-23T12:37:27.067 に答える
0

次の構文を使用します。

$("span").fadeOut("slow").css("background-color", "#FFFF99");
于 2009-04-09T12:52:29.030 に答える