13

JQueryを使用して、関数を呼び出すと、「#page」DIVの背景色がCSS定義の背景色から黄色にフェードし、元のCSS背景色に戻る関数を作成します。ページ。

JQueryでこれを行う方法についてのアイデアはありますか?

JQueryには「アニメーション」と「ハイライト」の両方の機能があることを知っています。「ハイライト」が適切なオプションのようですが、確かではありません。

ありがとう

4

8 に答える 8

17

この1つの機能のためだけにjquery UIをロードするのはかなり重いですが、とにかくそれを使用している場合、必要な効果は「ハイライト」です

http://docs.jquery.com/UI/Effects/Highlight

$("div").click(function () {
      $(this).effect("highlight", {}, 3000);
});
于 2009-08-17T01:52:20.517 に答える
7 
function flashColor(id)
{
    var container = $('#'+id);
    if(container.length)
    {
        var originalColor = container.css('backgroundColor');
        container.animate({
            backgroundColor:'yellow'
        },'normal','linear',function(){
            $(this).animate({
                backgroundColor:originalColor
            });
        });
    }
}
于 2009-08-16T23:35:25.130 に答える
6

名前付きの色を使用したい場合 (例:'yellow'の代わりに'#FFFF9C')、jQuery color プラグインのみが必要です。でさまざまな成功を収めましたがanimate、組み込みのコールバックと jQuery を使用するとcss、ほとんどの場合にうまくいくようです。

この関数を追加してみてください：

$(document).ready(function () {

    $.fn.animateHighlight = function (highlightColor, duration) {
        var highlightBg = highlightColor || "#FFFF9C";
        var animateMs = duration || 1000;
        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); 
            });
    };
});

そしてそれを次のように呼び出します：

$('#page').animateHighlight();

jQuery 1.5 を使用して IE9、FF4、および Chrome でテスト済み (このために UI プラグインは必要ありません)。

于 2011-04-19T14:32:22.103 に答える
2

組み込みの jQuery 関数animate()をコールバックで使用divして、元の色に戻すことができます。または、jQuery pulse プラグインを使用して自動的に実行します。

それが役立つことを願っています!

于 2009-08-16T22:51:45.250 に答える
1

「フラッシュ」と呼ばれるものを実現するために、このようなプラグインをチェックアウトすることをお勧めします。

残念ながら、「jquery flash plugin」という用語を検索すると、何百もの SWF プレーヤー プラグインの結果が得られます。

于 2009-08-16T23:03:12.850 に答える
1

色間でアニメーション化するには、色のプラグインが必要です。

以前のSO q & aを見る

于 2009-08-16T22:58:05.610 に答える
1

すべてのブラウザでテストする

$(document).ready(function () {
    var id = $("div#1"); // div id=1
    var color = "lightblue"; // color to highlight
    var delayms = "800"; // mseconds to stay color
    $(id).css("backgroundColor",color)
    .css("transition","all 1.5s ease") // you may also (-moz-*, -o-*, -ms-*) e.g
    .css("backgroundColor",color).delay(delayms).queue(function() {
        $(id).css("backgroundColor",""); 
        $(id).dequeue();
    }); 
});
于 2013-07-09T11:52:59.987 に答える
0

これだけで助かりました。出典：質問/5205445

$("div").click(function() 
{
  // do fading 3 times
  for(i=0;i<3;i++) 
  {
    $(this).fadeTo('slow', 0.5).fadeTo('slow', 1.0);
  }
});
于 2014-04-15T12:46:03.007 に答える