web-dev-qa-db-ja.com

divに対するjQueryの「点滅するハイライト」効果？

次の方法を探しています。

<div>をページに追加すると、ajaxコールバックが何らかの値を返します。 <div>にはajax呼び出しからの値が入力され、<div>は別の<div>の前に追加されます。これはテーブル列として機能します。

ページに何か新しいものがあることをユーザーに示すために、ユーザーの注意を引きたいと思います。
<div>を点滅させます。表示/非表示ではなく、しばらくの間、たとえば5秒間ハイライト/ハイライト解除します。

私は点滅プラグインを見てきましたが、私が見ることができる限り、それは要素の表示/非表示のみを行います。

ところで、ソリューションはクロスブラウザでなければなりません。はい、残念ながらIEが含まれています。 IEで動作させるにはおそらく少しハックする必要がありますが、全体的には動作する必要があります。

jquerycsshighlightingeffects
84
ZolaKt

jQuery UI Highlight Effectはあなたが探しているものです。

$("div").click(function () {
      $(this).effect("highlight", {}, 3000);
});

ドキュメントとデモを見つけることができます here

編集

脈動効果の方が適切かもしれません。 こちら をご覧ください。

＃2を編集

不透明度を調整するには、次のようにします。

$("div").click(function() {
  // do fading 3 times
  for(i=0;i<3;i++) {
    $(this).fadeTo('slow', 0.5).fadeTo('slow', 1.0);
  }
});

そのため、不透明度が50％を下回ることはありません。

168
sled

http://jqueryui.com/demos/effect/ をご覧ください。それはあなたが望むことを正確に行うパルセートという名前の効果があります。

$("#trigger").change(function() {$("#div_you_want_to_blink").effect("pulsate");});
29
Alternegro

これは、setIntervalおよびfadeToを使用する、私が作成したカスタム点滅効果です。

HTML-

<div id="box">Box</div>

JS-

setInterval(function(){blink()}, 1000);


    function blink() {
        $("#box").fadeTo(100, 0.1).fadeTo(200, 1.0);
    }

できるだけシンプル。

http://jsfiddle.net/Ajey/25Wfn/

28
Ajey

まだJquery UIライブラリを使用しておらず、効果を模倣したい場合は、非常に簡単です

$('#blinkElement').fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100);

また、数値をいじって、より高速または低速の数値を取得して、設計に適合させることもできます。

これはグローバルjquery関数でもあるため、サイト全体で同じ効果を使用できます。また、このコードをforループに入れた場合、1ミリオンのパルスを使用できるため、デフォルトの6またはデフォルトの大きさに制限されないことに注意してください。

編集：これをグローバルjQuery関数として追加

$.fn.Blink = function (interval = 100, iterate = 1) {
    for (i = 1; i <= iterate; i++)
        $(this).fadeOut(interval).fadeIn(interval);
}

以下を使用して、サイトから任意の要素を簡単に点滅させます

$('#myElement').Blink(); // Will Blink once

$('#myElement').Blink(500); // Will Blink once, but slowly

$('#myElement').Blink(100, 50); // Will Blink 50 times once
18
Clayton C

JQuery UI全体を含めたくない場合は、代わりに jQuery.Pulse.js を使用できます。

不透明度を変更するループアニメーションを作成するには、次の操作を行います。

$('#target').Pulse({opacity: 0.8}, {duration : 100, pulses : 5});

軽量（1 kb未満）で、あらゆる種類のアニメーションをループできます。

18
lulalala

追加のライブラリを必要としないjQueryベースのソリューションは見当たらないため、fadeIn/fadeOutを使用するソリューションよりも少し柔軟なシンプルなソリューションを紹介します。

$.fn.blink = function (count) {
    var $this = $(this);

    count = count - 1 || 0;

    $this.animate({opacity: .25}, 100, function () {
        $this.animate({opacity: 1}, 100, function () {
            if (count > 0) {
                $this.blink(count);
            }
        });
    });
};

このように使用します

$('#element').blink(3); // 3 Times.
6
Daniel Iser

JQuery UIを調べてください。具体的には、ハイライト効果：

http://jqueryui.com/demos/effect/

6
ghoppe

次のように異なる定義済みの色を使用します。

theme = {
    whateverFlashColor: '#ffffaa',
    whateverElseFlashColor: '#bbffaa',
    whateverElseThenFlashColor: '#ffffff',
};

このように使用します

$('#element').effect("highlight", {color:theme.whateverFlashColor}, 1000);

簡単:)

1
metamagikum

探しているものが正確に見つからなかったので、できる限り基本的なものを書きました。ハイライトされたクラスは、単に背景色にすることができます。

var blinking = false; // global scope

function start_blinking() {
    blinking = true;
    blink();
}

function stop_blinking() {
    blinking = false;
}

function blink(x=0) {
    $("#element").removeClass("highlighted"); // default to not highlighted to account for the extra iteration after stopping

    if (blinking) {
        if (x%2 == 0) $("#element").addClass("highlighted"); // highlight on even numbers of x
        setTimeout(function(){blink(++x)},500); // increment x and recurse
    }
}
0
Brandon Blackwell

私が与えた同様の答えを使用できると思います。ここで見つけることができます... https://stackoverflow.com/a/19083993/2063096

  • javascriptとjQueryのみであるため、すべてのブラウザーで動作するはずです。

注：このソリューションではjQuery UIを使用していません。コードを実装する前に好みに合わせて操作できるフィドルもあります。

0
SoEzPz

JQuery UIのオーバーヘッドが必要ない場合は、.animate()を使用して再帰的なソリューションを最近作成しました。必要に応じて遅延と色をカスタマイズできます。

function doBlink(id, count) {
    $(id).animate({ backgroundColor: "#fee3ea" }, {
        duration: 100, 
        complete: function() {

            // reset
            $(id).delay(100).animate({ backgroundColor: "#ffffff" }, {
                duration: 100,
                complete: function() {

                    // maybe call next round
                    if(count > 1) {
                        doBlink(id, --count);
                    }
                }
            });

        }
    });
}

もちろん、.animate()を使用するには、backgroundColorを取得するためのカラープラグインが必要です。 https://github.com/jquery/jquery-color

そして、コンテキストのビットを提供するために、これは私がそれを呼んだ方法です。ページをターゲットdivにスクロールしてから点滅させる必要がありました。

$(window).load(function(){
    $('html,body').animate({
        scrollTop: $(scrollToId).offset().top - 50
    }, {
        duration: 400,
        complete: function() { doBlink(scrollToId, 5); }
    });
});
0
Jibran

elem.fadeOut（10）.fadeIn（10）;を与えるだけです。

0
ibsenv

Jquery.blink.jsプラグインで試してください：

https://github.com/webarthur/jquery-blink

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="/path/to/jquery.blink.js"></script>

<script>
jQuery('span').blink({color:'white'}, {color:'black'}, 50);
</script>

＃楽しい！

0
Arthur Araújo
<script>
$(document).ready(function(){
    var count = 0;
    do {
        $('#toFlash').fadeOut(500).fadeIn(500);
        count++;
    } while(count < 10);/*set how many time you want it to flash*/
});
</script
0
Perez

チェックアウト-

<input type="button" id="btnclick" value="click" />
var intervalA;
        var intervalB;

        $(document).ready(function () {

            $('#btnclick').click(function () {
                blinkFont();

                setTimeout(function () {
                    clearInterval(intervalA);
                    clearInterval(intervalB);
                }, 5000);
            });
        });

        function blinkFont() {
            document.getElementById("blink").style.color = "red"
            document.getElementById("blink").style.background = "black"
            intervalA = setTimeout("blinkFont()", 500);
        }

        function setblinkFont() {
            document.getElementById("blink").style.color = "black"
            document.getElementById("blink").style.background = "red"
            intervalB = setTimeout("blinkFont()", 500);
        }

    </script>

    <div id="blink" class="live-chat">
        <span>This is blinking text and background</span>
    </div>
0
Johnny