「exampleDiv」の背景色を元の白い背景から、下のコードを呼び出して背景の黄色を変更して元の白い背景にフェードバックするように変更したい。JQueryの背景色アニメーションが動作しない
$("#exampleDiv").animate({ backgroundColor: "yellow" }, "fast");
ただし、このコードは機能しません。
私はJQueryコアとJQuery UIのみを私のWebページにリンクしています。
なぜ上記のコードは機能しませんか？
私はあなたにもJQuery Color Animationsが必要だと信じています。
backgroundColorのアニメーション化はjQuery 1.3.2（またはそれ以前）ではサポートされていません。数値を取るパラメータだけがサポートされています。方法についてはdocumentationを参照してください。 color animations pluginは、jQuery 1.2でこれを行う機能を追加します。
まだ1.4の場合：http://api.jquery.com/animate/ –
私の場合、それはeffects.core.jsで正常に機能しました。しかし、私はそれが本当に必要かどうかを思い出さない。私はそれが16進値でのみ動作すると思う。ここでは、ホバーしたときにものが消えるサンプルホバーコードを示します。私はanimateで成功を変化させていたきた
jQuery.fn.fadeOnHover = function(fadeColor)
{
this.each(function()
{
jQuery(this).data("OrigBg",jQuery(this).css("background-color"));
jQuery(this).hover(
function()
{
//Fade to the new color
jQuery(this).stop().animate({backgroundColor:fadeColor}, 1000)
},
function()
{
//Fade back to original color
original = jQuery(this).data("OrigBg");
jQuery(this).stop().animate({backgroundColor:original},1000)
}
);
});
}
$(".nav a").fadeOnHover("#FFFF00");
が、そのコールバックに建てプラスjQueryのcssを使用すると、ほとんどの場合のために働くように見えることがわかった：それは役に立つかもしれないと思いました。
は、この機能を試してみてください：
$(document).ready(function() {
$.fn.animateHighlight = function (highlightColor, duration) {
var highlightBg = highlightColor || "#FFFF9C";
var animateMs = duration || "fast"; // edit is here
var originalBg = this.css("background-color");
if (!originalBg || originalBg == highlightBg)
originalBg = "#FFFFFF"; // default to white
jQuery(this)
.css("backgroundColor", highlightBg)
.animate({ backgroundColor: originalBg }, animateMs, null, function() {
jQuery(this).css("backgroundColor", originalBg);
});
};
});
などのようにそれを呼び出す：jQueryの1.5を（このためのUIのプラグインを必要としない）を使用して、IE9、FF4、およびChromeでテスト済み
$('#exampleDiv').animateHighlight();
、。 jQueryカラープラグインを使用していませんでした。名前付きカラー（例：'#FFFF9C'の代わりに'yellow'）を使用する場合にのみ必要です。
これを機能させるには、color.jsファイルを使用する必要がありました。私はjquery 1.4.2を使用しています。
私は同じ問題を抱えていたと私は私が正しいのjsファイルが含まれていたときに動作するようにすべてを取得することができました。
<script src="/Scripts/jquery-1.9.1.js"></script>
<script src="/Scripts/jquery-ui-1.8.20.js"></script>
<script src="/Scripts/jquery.color-2.1.2.js"></script>
私はそれをさらに進歩させ、誰かが書いた素晴らしい拡張子を発見しました。
$('#someId').flash('255,148,148', 1100);
このコードは、あなたの要素はその後、元の色に赤に点滅することになる。
jQuery.fn.flash = function (color, duration) {
var current = this.css('backgroundColor');
this.animate({ backgroundColor: 'rgb(' + color + ')' }, duration/2)
.animate({ backgroundColor: current }, duration/2);
}
上記のコードは、私は次の操作を行うことができます。
ここにいくつかのサンプルコードがあります。 http://jsbin.com/iqasaz/2
私は同じ問題に遭遇し、最終的にページ上でjqueryのjsファイルが複数回呼び出されることが判明しました。
これは他のメソッドでも問題なく動作しますが、左のような他のCSSプロパティで試してみるとアニメーション化されますが、アニメーションメソッドの背景色プロパティでは機能しません。
したがって、私はjqueryのjsファイルの追加呼び出しを削除し、それは私のために絶対にうまくいった。
ちょうどjqueryのスクリプト以下このスニペットを追加し、それがすぐに作業を開始しました：
<script src="https://cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>
可能重複http://stackoverflow.com/questions/190560/jquery -animate-backgroundcolor） – mercator