jQuery "Blinkendes Highlight" -Effekt auf div?

Ich suche nach einer Möglichkeit, Folgendes zu tun.

Ich füge einer <div>Seite ein hinzu, und ein Ajax-Rückruf gibt einen Wert zurück. Das <div>wird mit Werten aus dem Ajax-Aufruf gefüllt, und das <div>wird dann einem anderen vorangestellt <div>, das als Tabellenspalte fungiert.

Ich möchte die Aufmerksamkeit des Benutzers auf sich ziehen, um ihm / ihr zu zeigen, dass es etwas Neues auf der Seite gibt.
Ich möchte, dass das <div>blinkt, nicht ein- / ausgeblendet wird, sondern für einige Zeit hervorgehoben / deaktiviert wird, sagen wir 5 Sekunden.

Ich habe mir das Blink-Plugin angesehen, aber soweit ich sehen kann, wird es nur für ein Element ein- / ausgeblendet.

Übrigens muss die Lösung browserübergreifend sein, und ja, IE ist leider enthalten. Ich werde wahrscheinlich ein wenig hacken müssen, damit es im IE funktioniert, aber insgesamt muss es funktionieren.

Der jQuery UI Highlight-Effekt ist genau das, wonach Sie suchen.

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

Die Dokumentation und Demo finden Sie hier

Bearbeiten :
Vielleicht ist der jQuery UI Pulsate-Effekt besser geeignet, siehe hier

Bearbeiten # 2 :
Um die Deckkraft anzupassen, können Sie Folgendes tun:

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

... damit die Deckkraft nicht unter 50% sinkt.

Schauen Sie sich http://jqueryui.com/demos/effect/ an . Es hat einen Effekt namens pulsate, der genau das tut, was Sie wollen.

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

Dies ist ein benutzerdefinierter Blinkeffekt, den ich erstellt habe und der setIntervalund verwendetfadeTo

HTML -

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

JS -

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


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

So einfach wie es nur geht.

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

Wenn Sie die Jquery-UI-Bibliothek noch nicht verwenden und den Effekt nachahmen möchten, ist das, was Sie tun können, sehr einfach

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

Sie können auch mit den Zahlen herumspielen, um eine schnellere oder langsamere zu erhalten, die besser zu Ihrem Design passt.

Dies kann auch eine globale Abfragefunktion sein, sodass Sie den gleichen Effekt auf der gesamten Site verwenden können. Beachten Sie auch, dass Sie, wenn Sie diesen Code in eine for-Schleife einfügen, 1 Million Impulse haben können, sodass Sie nicht auf die Standardeinstellung 6 oder die Standardeinstellung 6 beschränkt sind.

BEARBEITEN: Hinzufügen als globale jQuery-Funktion

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

Blinken Sie jedes Element einfach von Ihrer Site aus, indem Sie Folgendes verwenden

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

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

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

Für diejenigen, die nicht die gesamte jQuery-Benutzeroberfläche einbeziehen möchten, können Sie stattdessen jQuery.pulse.js verwenden.

Gehen Sie folgendermaßen vor, um eine Schleifenanimation mit sich ändernder Deckkraft zu erhalten:

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

Es ist leicht (weniger als 1 KB) und ermöglicht es Ihnen, jede Art von Animationen zu wiederholen.

Möglicherweise möchten Sie einen Blick in die jQuery-Benutzeroberfläche werfen. Insbesondere der Highlight-Effekt:

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

Da ich keine jQuery-basierten Lösungen sehe, für die keine zusätzlichen Bibliotheken erforderlich sind, handelt es sich um eine einfache Lösung, die etwas flexibler ist als die mit 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);
            }
        });
    });
};

Verwenden Sie es so

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

Ich benutze verschiedene vordefinierte Farben wie folgt:

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

und benutze sie so

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

einfach :)

Wenn Sie den Overhead der jQuery-Benutzeroberfläche nicht möchten, habe ich kürzlich eine rekursive Lösung mit geschrieben .animate(). Sie können die Verzögerungen und Farben nach Bedarf anpassen.

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

        }
    });
}

Natürlich benötigen Sie das Farb-Plugin, um backgroundColordamit arbeiten zu können .animate(). https://github.com/jquery/jquery-color

Und um ein bisschen Kontext zu bieten, habe ich es so genannt. Ich musste die Seite zu meinem Ziel-Div scrollen und dann blinken.

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

Ich denke, Sie könnten eine ähnliche Antwort verwenden, die ich gegeben habe. Sie finden es hier ... https://stackoverflow.com/a/19083993/2063096

• sollte auf allen Browsern funktionieren, da es nur Javascript und jQuery gibt.

Hinweis: Diese Lösung verwendet KEINE jQuery-Benutzeroberfläche. Es gibt auch eine Geige, mit der Sie nach Belieben herumspielen können, bevor Sie sie in Ihren Code implementieren.

gib einfach elem.fadeOut (10) .fadeIn (10);

Versuchen Sie es mit dem Plugin 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>

#genießen!

<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

Probieren Sie es aus -

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

Ich konnte nicht genau das finden, wonach ich suchte, also schrieb ich etwas so Grundlegendes, wie ich es machen konnte. Die hervorgehobene Klasse kann nur eine Hintergrundfarbe sein.

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