jQuery "Blinkendes Highlight" -Effekt auf div?

86

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.

ZolaKt
quelle
4
Bitte nicht. Wenn Sie müssen, markieren Sie es einfach mit dem Hervorhebungseffekt ( docs.jquery.com/UI/Effects/Highlight ), aber lassen Sie es nicht blinken.
Tvanfosson
1
@tv Ich denke, ein kurzes zwei oder drei "Blinken" (wobei ein "Blinken" hoffentlich etwas Feines ist, wie ein animiertes Randglühen oder so etwas) ist in Ordnung und nicht irritierend, aber definitiv altmodisches Blinken über einen langen Zeitraum von Die Zeit wäre schlecht.
Pointy
1
Hehe, ich weiß, dass Blinken irritierend ist, aber es hat hier tatsächlich einen Zweck. Es wird nicht erwartet, dass der Benutzer den ganzen Tag am Monitor sitzt, also muss er sehen, ob sich aus der Ferne etwas geändert hat
ZolaKt
25
Ihr seid komisch. Webseiten werden nur für das verwendet, was ihr für richtig hältt? Ich möchte nicht hervorheben, ich brauche ein Blinken, weil ich eine Prozessmonitorseite schreibe, die auf einem großformatigen Fernseher angezeigt werden soll. Sie muss rot blinken und fortfahren, damit die Leute darauf aufmerksam werden.
Bmo
1
Mögliches Duplikat von Wie macht man ein Element "blinken" in jQuery
cweiske

Antworten:

171

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.

Schlitten
quelle
1
Pulsieren ist das, wonach ich suche. Vielen Dank. Gibt es sowieso etwas, um zu verhindern, dass es vollständig verblasst? Nur um zu verblassen, sagen wir zu 50% Deckkraft? Vielleicht nur, um den Highlight-Effekt ein paar Mal zu verketten?
ZolaKt
32

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");});
Alternegro
quelle
29

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/

Ajey
quelle
1
Funktioniert gut! Und keine JQuery-Benutzeroberfläche erforderlich.
Pavel Vlasov
tolle Lösung! funktioniert ohne Probleme mit Jquery. Danke
Digitale Seite
Es ist die beste Lösung hier!
Entwickler
Die beste Lösung hier!
w3spi
19

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
Clayton C.
quelle
18

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.

lulalala
quelle
1
Benötigt
1
@ JeromeJaglale Ich verwende es ohne jQuery-Benutzeroberfläche, da die Opazitätsänderung nur in jQuery durchgeführt werden kann. Dies sollte für Sie auch so sein, es sei denn, Sie verwenden spezifische Animationen für die jQuery-Benutzeroberfläche.
Lulalala
1
Guter Punkt. Ich wurde von der ersten Demo (rot pulsierender Text) in die Irre geführt, für die jQuery UI-Effekte erforderlich sind.
Jerome Jaglale
Nur eine Notiz. Sie müssen nur jquery.color.jsfür die Farbe Zeug einschließen .
Dave
6

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

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

Ghoppe
quelle
6

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.
Daniel Iser
quelle
1

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

Metamagikum
quelle
0

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); }
    });
});
Jibran
quelle
0

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.

SoEzPz
quelle
0

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

ibsenv
quelle
FadeOut / FadeIn versteckt / zeigt das Element am Ende, das nicht das ist, wonach ich gesucht habe. Ich musste die
Farbopazität
Nein, elem.show (). Hide () macht das. FadeOut / FadeIn ändert die Opaktität. Sie können mit der Dauer von fadeOut / fadeIn experimentieren, um den gewünschten Effekt zu erzielen. Es versteckt das Element jedoch einmal.
Ibsenv
0

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!

Arthur Araújo
quelle
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
Perez
quelle
0

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

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
    }
}
Brandon Blackwell
quelle