-2

次のスニペットを使用して要素の背景を水色にし、30秒かけてゆっくりとフェードして白っぽくします。

$("#" + post.Id).css("background-color", "lightblue")
.animate({ backgroundColor: "white" }, 30000);

2つの質問。

まず、白にフェードする代わりに、不透明度を100％にフェードする方法はありますか？そうすれば、ページの背景色を変更することを選択した場合、「白」を変更する必要はありませんか？

次に、10回または15回に1回程度、背景は水色のままで、白にフェードしません。最新バージョンのjQueryとUIコアを使用しています。何がうまくいかない可能性がありますか？

編集：バウンティは、2番目の質問に関する問題の解決策です。

EDIT2：

どうやら私は自分の解決策を転がしたと言ったがそれを示さなかったので、忘却に反対票を投じたようです。私の悪い。私は自己宣伝したくありませんでした。私のコードは100％動作し、jQueryを必要としません。デモンストレーションとコードは次の場所にあります。

http://prettycode.org/2009/07/30/fade-background-color-in-javascript/

4

9 に答える 9

14

2番目の質問：私の経験では、これは通常、ページの他の場所でJavascriptエラーが発生したためです。Javascriptの例外が1つあると、ページの残りの部分でJavascriptの実行が停止します。Firebugをインストールしてみて（まだインストールしていない場合）、[コンソール]タブを開いて有効にします。次に、JavaScriptのエラーまたは例外がコンソールに出力されます。

もう1つ試してみるのは（私の最後のステートメントと少し矛盾します...）、すべてのブラウザープラグインを無効にして、再作成できるかどうかを確認することです。ページ上のスクリプト（特にGreaseMonkey）に干渉することがあります。

このアニメーションの問題を再現するサンプルHTMLスニペットを提供できれば、私たちがお手伝いするのははるかに簡単です。 以下に貼り付けたスクリプトでは、好きなだけ速くまたは遅く、一日中クリックすることができ、アニメーション化に失敗することはありません。

最初の質問：回避策を見つけたとおっしゃっていましたが、以下は私にとってはうまくいくので（IE6でも）、あなたが考えていたものとは異なる可能性があるので、投稿したいと思いました。（CSSの「不透明度」プロパティの設定jQuery.css()はIEで機能しますが、IEはCSSで直接「不透明度」プロパティをサポートしていないことに注意してください。）

<html>
<head>
<style>
body { background-color: #08f; }
#test { background-color: white; width: 100px; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
var myOpacity = 0.125;
$(function(){
  $('#test').css('opacity', myOpacity);
  $('a').click(function(){
    myOpacity = 1.0 - myOpacity;
    $('#test').animate({ opacity: myOpacity });
    return false;
  });
});
</script>
</head>
<body>
<p><a href="#">Click me</a></p>
<div id="test">Test</div>
</body></html>
于 2009-08-03T17:53:26.060 に答える
9

カラープラグインを忘れないでください。

こちらをご覧ください

色が青にアニメートできない場合は、コールバック関数を使用してメッセージをコンソールに記録してみてください。次に、イベントが実際に発生して完了したことを確認できます。もしそうなら、あなたは潜在的に2つのアニメートを使うことができます。最初に家の中間色にアニメーション化してから、コールバックを使用して白にアニメーション化します（したがって、外側が失敗したがコールバックが完了した場合は、チェリーを2回噛みます）

問題を再現するか、問題自体のURLを指定できると便利です。

例えば

$("#" + post.Id).css("background-color", "lightblue")
   .animate({ backgroundColor: "#C0D9D9" }, 15000, function(){
      $(this).animate({ backgroundColor: "#ffffff" }, 15000)
});
于 2009-07-23T21:04:37.823 に答える
3

JQueryのanimateメソッドを完全に避けて、いつでもこのようなものを使用できます。

setTimeout(function() { UpdateBackgroundColor(); }, 10);

UpdateBackgroundColor() {
    // Get the element.
    // Check it's current background color.
    // Move it one step closer to desired goal.
    if (!done) {
        setTimeout(UpdateBackgroundColor, 10);
    }
}

また、適切なアイテムから背景色を読み取ることで、「白」のコーディングを削除できる場合があります（これには、ツリーを上る必要がある場合があります）。

于 2009-07-31T20:11:18.050 に答える
2

jQueryにアイテムの不透明度CSSプロパティを変更させることは可能ですが（別の回答で述べたように）、それがシナリオで機能しない理由は2つあります。まず、「100％不透明」なものを完全に表示します。アイテムの不透明度に他の変更がない場合、デフォルトの不透明度は100％であり、変更はありません。したがって、不透明度が0％にフェードすることを意味していると思いますが、これは消えます。これにより、水色の背景だけでなく、その上のテキストも削除されます。これは、あなたの意図ではないと思います。

状況を簡単に修正できる可能性があるのは、元のコードリストのカラーワード「白」を「透明」に変更することです。カラープラグインはそのカラーワードを認識しない場合がありますが（ドキュメントをまだチェックしていません）、背景色を「透明」に設定すると、背後の色（他に何もない場合はページの背景）が透けて見え、自己-ページの背景を変更した場合は更新してください。

于 2009-08-06T17:39:06.270 に答える
1

最初の質問にお答えします。次のように不透明度をアニメートできます。

.animate({opacity: 1.0}, 3000)

フェードアウト/フェードインも試してみてはいかがでしょうか。

于 2009-07-23T21:00:13.713 に答える
0

2番目の質問について：

JQueryのデフォルトのアニメーションクラスが適切に機能していないと思われる場合は、BernieのBetterAnimationClassを試すことができます。私はその図書館でいくつかの良い経験をしています。

于 2009-08-04T06:22:38.423 に答える
0

アニメーションは数字に対してのみ機能します。jqueryのドキュメントを参照してください。不透明度はできますが、背景色はできません。カラープラグインを使用できます。背景色は、数字ではない「赤」、「青」、「＃493054」などの文字列を使用します。

于 2009-07-23T20:57:35.157 に答える
0

どうですか：

$("#" + post.Id).fadeIn( "slow" );
于 2009-07-23T20:59:13.310 に答える
0

同じスペースを占める2つのdivを持つ可能性があります（position：absolute;およびposition：relativeを使用します。一方が上にあり、もう一方が下にあることを確認するために、一方を上にz-indexを設定します。上の方は透明な背景になります下の色は背景色になります。次に下の色をフェードアウトします。

于 2009-07-31T20:10:12.763 に答える