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


88

私は次のことをする方法を探しています。

<div>ページにを追加すると、ajaxコールバックが何らかの値を返します。<div>AJAX呼び出しからの値で充填され、そして<div>その後、別の先頭に付加された<div>テーブルの列として作用します。

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

私はまばたきプラグインを見てきましたが、私が見る限り、それは要素でのみ表示/非表示になります。

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


4
しないでください。必要に応じて、ハイライト効果(docs.jquery.com/UI/Effects/Highlight)でハイライトしますが、点滅させないでください。
tvanfosson 2011年

1
@tv短い2、3回の「まばたき」(「まばたき」は、アニメーションの境界線の輝きなどの微妙なものであることが望ましい)は問題なく、イライラすることはありませんが、長期間にわたって間違いなく昔ながらのまばたきです。時間は悪いでしょう。
とがった2011年

1
まばたきはイライラすることは知っていますが、実際にはここで目的があります。ユーザーは一日中モニターの
そば

25
君たちは陽気だ。ウェブページはあなたたちが正しいと思うものにのみ使用されますか?強調したくありません。大判テレビで表示するプロセスモニターページを作成しているので、点滅する必要があります。赤く点滅して続行する必要があるため、人々の目を引き付けます。
bmo 2013年

回答:


173

jQueryUI ハイライト効果はあなたが探しているものです。

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

ドキュメントとデモはここにあります


編集
たぶんjQueryのUI 脈動効果がより適切である、見るこちら


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

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

...したがって、不透明度が50%を下回ることはありません。


1
脈動は私が探しているものです。どうもありがとう。とにかく、完全に色あせないようにする方法はありますか。フェードするだけで、不透明度が50%になるとしましょう。たぶん、ハイライト効果を数回連鎖させるだけですか?
zolaKt 2011年


30

これは私が作成したカスタムのまばたき効果でsetIntervalfadeTo

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/


1
正常に動作します!そして、JQueryUIは必要ありません。
Pavel Vlasov 2015

素晴らしい解決策!Jqueryを使用すると問題なく動作します。ありがとう
デジタルサイト

ここでの最良の解決策です!
DmitryBoyko 2016

ここでの最良の解決策!
w3spi 2017年

19

Jquery UIライブラリをまだ使用しておらず、その効果を模倣したい場合は、実行できることは非常に簡単です。

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

また、数値をいじって、デザインに合わせて高速または低速の数値を取得することもできます。

これはグローバルjquery関数にすることもできるため、サイト全体で同じ効果を使用できます。また、このコードをforループに入れると、100万パルスになる可能性があるため、デフォルトの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

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

不透明度が変化するアニメーションをループさせるには、次のようにします。

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

軽量(1kb未満)で、あらゆる種類のアニメーションをループさせることができます。


1
まだ
jQueryUIの

1
@JeromeJaglale不透明度の変更はjQueryのみで実行できるため、jQueryUIなしで使用します。jQuery UI固有のアニメーションを使用している場合を除き、同じである必要があります。
lulalala 2013年

1
いい視点ね。jQuery UIエフェクトを必要とする最初のデモ(テキストが赤く点滅)に惑わされました。
Jerome Jaglale 2013年

ただのメモ。あなたjquery.color.jsは色のもののために含める必要があるだけです。
デイブ


6

追加のライブラリを必要としない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.

1

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

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

このように使用します

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

簡単:)


0

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

        }
    });
}

もちろん、あなたが得るために、カラーのプラグインが必要になりますbackgroundColorで動作するように.animate()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

私が与えたのと同じような答えを使うことができると思います。あなたはここでそれを見つけることができます... https://stackoverflow.com/a/19083993/2063096

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

注:このソリューションはjQuery UIを使用しません。フィドルもあるため、コードに実装する前に好みに合わせて試すことができます。


0

elem.fadeOut(10).fadeIn(10);を与えるだけです。


FadeOut / FadeInは、私が探していたものではない要素を最後に非表示/表示します。要素を非表示にせずに色の不透明度を増減する必要がありました
ZolaKt 2015

いいえ、elem.show()。hide()はそれを行います。FadeOut / FadeInは不透明度を変更します。必要な効果を得るために、fadeOut / fadeInの期間をいじることができます。しかし、それは一度エレムを隠します。
ibsenv 2015


0
<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

それをチェックしてください-

<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

探していたものが正確に見つからなかったので、できる限り基本的なものを書きました。強調表示されたクラスは、背景色だけである可能性があります。

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
    }
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.