it-swarm.com.de

jQuery "blinkende Hervorhebung" auf div?

Ich suche nach einem Weg, um Folgendes zu tun.

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

Ich möchte die Aufmerksamkeit des Benutzers erlangen, um ihm/ihm zu zeigen, dass auf der Seite etwas Neues ist.
Ich möchte, dass der <div> blinkt, nicht ein/ausgeblendet wird, aber für einige Zeit hervorgehoben/abgehoben wird, sagen wir 5 Sekunden.

Ich habe mir das blink-Plugin angesehen, aber soweit ich sehen kann, wird es nur auf einem Element angezeigt/ausgeblendet.

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

84
ZolaKt

jQuery UI Highlight Effect ist das, wonach Sie suchen. 

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

Die Dokumentation und Demo finden Sie hier

Bearbeiten

Vielleicht ist der Impulseffekt besser geeignet, siehe hier

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

Die Deckkraft wird also nicht unter 50% liegen.

168
sled

Werfen Sie einen Blick auf http://jqueryui.com/demos/effect/ . Es hat einen Effekt namens pulsate, der genau das tut, was Sie wollen.

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

Dies ist ein benutzerdefinierter Blink-Effekt, den ich erstellt habe und der setInterval und fadeTo verwendet.

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/

28
Ajey

Wenn Sie die Jquery-UI-Bibliothek nicht bereits 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 Jquery-Funktion sein, damit Sie denselben Effekt auf der gesamten Site verwenden können. Beachten Sie außerdem, dass Sie, wenn Sie diesen Code in eine for-Schleife einfügen, 1 Million Impulse haben können. Daher sind Sie nicht auf die Standardeinstellung 6 oder die Standardeinstellung beschränkt.

EDIT: Hinzufügen als globale jQuery-Funktion

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

Blinzeln Sie jedes Element auf folgende Weise von Ihrer Site aus

$('#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

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

Führen Sie folgende Schritte aus, 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 Ihnen, jede Art von Animation zu durchlaufen.

18
lulalala

Da ich keine jQuery-basierten Lösungen sehe, für die keine zusätzlichen Bibliotheken erforderlich sind, handelt es sich hier um eine einfache, die etwas flexibler ist als die, die fadeIn/fadeOut verwenden.

$.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.
6
Daniel Iser

Sie können sich die jQuery-Benutzeroberfläche ansehen. Insbesondere der Hervorhebungseffekt:

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

6
ghoppe

Ich konnte nicht genau das finden, wonach ich suchte, also etwas so grundlegendes geschrieben, wie ich es machen konnte. Die hervorgehobene Klasse könnte 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
    }
}
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 NICHT die jQuery-Benutzeroberfläche. Außerdem gibt es eine Geige, mit der Sie nach Belieben spielen können, bevor Sie sie in Ihren Code integrieren.

0
SoEzPz

Wenn Sie den Overhead der jQuery-Benutzeroberfläche nicht wünschen, habe ich kürzlich eine rekursive Lösung mit .animate() geschrieben. 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, damit backgroundColor mit .animate(). https://github.com/jquery/jquery-color funktioniert

Und um etwas Kontext zu geben, nannte ich es so. 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); }
    });
});
0
Jibran

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

0
ibsenv

Ich verwende verschiedene vordefinierte Farben wie folgt:

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

und benutze sie so

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

einfach :)

0
metamagicson

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!

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

Hör zu -

<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