Wie lässt sich ein Element in jQuery „blinken“?


249

Ich bin brandneu bei jQuery und habe Erfahrung mit Prototype. In Prototype gibt es eine Methode, um ein Element zu "flashen" - dh. Markieren Sie es kurz in einer anderen Farbe und lassen Sie es wieder normal werden, damit der Blick des Benutzers darauf gelenkt wird. Gibt es eine solche Methode in jQuery? Ich sehe FadeIn, FadeOut und Animieren, aber ich sehe nichts wie "Flash". Vielleicht kann einer dieser drei mit geeigneten Eingaben verwendet werden?


4
Dies beantwortet das OP nicht, aber der (lose getestete) Code kann für zukünftige Google-Sucher (wie mich) nützlich sein:$.fn.flash = function(times, duration) { var T = this; times = times || 3; duration = duration || 200; for ( var i=0; i < times; i++ ) { (function() { setTimeout(function() { T.fadeOut(duration, function() { T.fadeIn(duration); }); }, i*duration*2+50); })(i); } };
Cory Mawhorter

3
Fügen Sie diese CSS zum Element hinzu: text-decoration:blinkund entfernen Sie sie.
Dementic


Ich habe hier eine JSFiddle-Demo veröffentlicht, die meiner Meinung nach eine bessere Antwort ist als auf dieser Seite: stackoverflow.com/a/52283660/470749
Ryan

Bitte beachten Sie, dass das Blinken zugunsten von Animationen offiziell veraltet ist. Überprüfen Sie unter: w3.org/TR/2019/CR-css-text-decor-3-20190813/#valdef-text-decoration-line-blink
OrizG

Antworten:


318

Mein Weg ist .fadein, .fadeout .fadein, .fadeout ......

$("#someElement").fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);


14
Nicht die schönste Lösung, aber kurz, leicht zu verstehen und erfordert keine Benutzeroberfläche / Effekte. Nett!
Chris Jaynes

21
Ich benutze eine Verzögerung vor der FadeIn, FadeOut-Sequenz, so etwas wie $('..').delay(100).fadeOut().fadeIn('slow')
alexandru.topliceanu

1
blinkende Hintergründe sehen oft klebrig aus oder sind einfach nur verwirrend - besonders wenn der Gegenstand, den Sie blinken, auf einem einfachen weißen Hintergrund sitzt. Versuchen Sie dies zuerst, bevor Sie Farb-Plugins hinzufügen und versuchen, Hintergründe usw. zu
flashen

4
Das Problem bei dieser Methode ist, dass diese Ereignisse möglicherweise aufeinander treffen. Sie sollten wahrscheinlich jedes nachfolgende FadeIn und FadeOut in ihre jeweiligen Rückrufe einfügen. Zum Beispiel: var $someElement = $("#someElement"); $someElement.fadeIn(100, function(){ $someElement.fadeOut(100, function(){ /*...etc...*/ }) })
thekingoftruth

Beachten Sie, dass Sie dies in Validierungscodes verwenden, die häufig aufgerufen werden. Wenn der Code mit dem richtigen Timing aufgerufen wird, wird möglicherweise ein Element
Chris Pfohl,

122

Sie können das jQuery Color-Plugin verwenden .

Um beispielsweise auf alle Divs auf Ihrer Seite aufmerksam zu machen, können Sie den folgenden Code verwenden:

$("div").stop().css("background-color", "#FFFF9C")
    .animate({ backgroundColor: "#FFFFFF"}, 1500);

Bearbeiten - Neu und verbessert

Das Folgende verwendet die gleiche Technik wie oben, hat jedoch die zusätzlichen Vorteile von:

  • parametrisierte Hervorhebungsfarbe und -dauer
  • Beibehaltung der ursprünglichen Hintergrundfarbe, anstatt davon auszugehen, dass es weiß ist
  • Da es sich um eine Erweiterung von jQuery handelt, können Sie sie für jedes Objekt verwenden

Erweitern Sie das jQuery-Objekt:

var notLocked = true;
$.fn.animateHighlight = function(highlightColor, duration) {
    var highlightBg = highlightColor || "#FFFF9C";
    var animateMs = duration || 1500;
    var originalBg = this.css("backgroundColor");
    if (notLocked) {
        notLocked = false;
        this.stop().css("background-color", highlightBg)
            .animate({backgroundColor: originalBg}, animateMs);
        setTimeout( function() { notLocked = true; }, animateMs);
    }
};

Anwendungsbeispiel:

$("div").animateHighlight("#dd0000", 1000);

4
Funktioniert auch bei mir nicht - sind Sie sicher, dass dies nicht auf dem Plugin für Farbanimationen beruht? plugins.jquery.com/project/color
UpTheCreek

18
Aus jquery docs auf .animate (): Alle animierten Eigenschaften sollten ein einziger numerischer Wert sein (außer wie unten angegeben). Nicht numerische Eigenschaften können nicht mit den grundlegenden jQuery-Funktionen animiert werden. (Zum Beispiel können Breite, Höhe oder Links animiert werden, Hintergrundfarben jedoch nicht.) Ich denke, Sie verwenden ein Plugin, ohne es zu merken.
UpTheCreek

4
Ich habe festgestellt, dass kein Objekt zurückgegeben wurde. Ich habe versucht, diesen kleinen Effekt zu stapeln (EG: $ ("# qtyonhand"). AnimateHighlight ("# c3d69b", 1500) .delay (1500) .animateHighlight ("# 76923C", 5000);) und habe einen Fehler erhalten. Ich musste "return this" hinzufügen. bis zum Ende der Methode.
Salbei

2
Offizielle jQuery Docs sagen, dass Sie das jQuery.Color () Plugin verwenden müssen, damit dies funktioniert: github.com/jquery/jquery-color
jchook

3
Aus den jquery .animate-Dokumenten: Note: The jQuery UI project extends the .animate() method by allowing some non-numeric styles such as colors to be animated.- Wenn Sie Farben animieren möchten, benötigen Sie die jQuery-Benutzeroberfläche oder ein anderes Plugin.
Adam Tomat

101

Sie können CSS3-Animationen verwenden, um ein Element zu flashen

.flash {
  -moz-animation: flash 1s ease-out;
  -moz-animation-iteration-count: 1;

  -webkit-animation: flash 1s ease-out;
  -webkit-animation-iteration-count: 1;

  -ms-animation: flash 1s ease-out;
  -ms-animation-iteration-count: 1;
}

@keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

@-webkit-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

@-moz-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

@-ms-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

Und Sie müssen die Klasse hinzufügen

jQuery(selector).addClass("flash");

Schöne Lösung, wenn es nur einmal funktionieren muss. Nachdem die Klasse hinzugefügt wurde, führt das anschließende Hinzufügen der Klasse (logisch) nicht zum Flashen des Elements.
Simon

7
Die beste Idee überhaupt. Ich habe ein Settimeout verwendet, um die Klasse 2 Sekunden nach dem Effekt zu entfernen
Insign

6
Hier ist ein Beispiel für das Entfernen der Klasse nach Abschluss der Animation, damit Sie sie weiter flashen können. jsfiddle.net/daCrosby/eTcXX/1
DACrosby

Gut, das funktioniert, aber beachten Sie, dass die richtige Eigenschaft für die Hintergrundfarbe "transparent" anstelle von "keine" ist, wenn Sie einen Stylesheet-Validator übergeben möchten.
Jan M

1
Beachten Sie, dass alle modernen Browser jetzt die regulären @keyframesund animationRegeln unterstützen, sodass außer vielleicht keine Präfixversionen verwendet werden müssen -webkit-(für den Blackberry-Browser).
Coredumperror

74

Nach 5 Jahren ... (und kein zusätzliches Plugin erforderlich)

Dieser "pulsiert" es auf die gewünschte Farbe (z. B. Weiß), indem er eine div-Hintergrundfarbe dahinter setzt und das Objekt dann wieder ein- und ausblendet .

HTML- Objekt (zB Schaltfläche):

<div style="background: #fff;">
  <input type="submit" class="element" value="Whatever" />
</div>

jQuery (Vanille, keine anderen Plugins):

$('.element').fadeTo(100, 0.3, function() { $(this).fadeTo(500, 1.0); });

Element - Klassenname

erste Zahl in fadeTo()Millisekunden für den Übergang

zweite Zahl in fadeTo()- Deckkraft des Objekts nach dem Ein- / Ausblenden

Sie können dies in der unteren rechten Ecke dieser Webseite überprüfen: https://single.majlovesreg.one/v1/

Bearbeiten Sie (willsteel) keinen duplizierten Selektor, indem Sie $ (this) und optimierte Werte verwenden, um akut einen Flash auszuführen (wie vom OP angefordert).


60
fadeTo(0000)- Metallica
Vulkanrabe

2
Glatt wie Butter! Beste Lösung von allen. Vielen Dank!
ColdTuna

1
Wie macht man das unendlich?
Tomésans

1
Beispiel Link defekt.
Meshy

1
@tomexsans $.fn.flashUnlimited=function(){$(this).fadeTo('medium',0.3,function(){$(this).fadeTo('medium',1.0,$(this).flashUnlimited);});}Sie können es dann so nennen $('#mydiv').flashUnlimited();- Es macht das, was Majal oben geantwortet hat, und ruft sich am Ende des Zyklus erneut auf.
Jay Dadhania

46

Sie könnten den Hervorhebungseffekt in der jQuery-Benutzeroberfläche verwenden, um dasselbe zu erreichen, denke ich.


8
Dies ist Teil von jQueryUI, das ziemlich umfangreich ist und nicht Teil der Standard-jQuery-Bibliothek (obwohl Sie nur den UI-Effektkern verwenden können, auf den es sich stützt).
UpTheCreek

3
Sie können nur den Effektkern + den gewünschten Effekt herunterladen, der für "Hervorheben" + "Pulsieren" 12 KB beträgt. Nicht ganz leicht, aber auch nicht so schwer.
Roman Starkov

45

Wenn Sie jQueryUI verwenden, gibt es eine pulsateFunktion inUI/Effects

$("div").click(function () {
      $(this).effect("pulsate", { times:3 }, 2000);
});

http://docs.jquery.com/UI/Effects/Pulsate


1
@DavidYell, öffne eine neue Frage und poste einen Beispielcode. pulsatefunktioniert gut in Chrome.
SooDesuNe

Alle 5 Sekunden blinken: setInterval (function () {$ (". Red-flag"). Effect ("pulsate", {times: 3}, 2000);}, 5000);
Adrian P.

@all Hat jemand jetzt, wenn dies CSS3-Animationen verwendet und / oder transformiert? Trotzdem nett (aber ich bevorzuge immer noch CSS3 wie in einer der anderen Antworten)
Martin Meeser

18
$('#district').css({opacity: 0});
$('#district').animate({opacity: 1}, 700 );

1
Das ist einfach und elegant.
Gra

Während Sie andere Geschwisterelemente verwenden fadeInund fadeOutbeeinflussen, weil sie die CSS- displayEigenschaft umschalten , sehen Sie in meinem Fall seltsam aus. Aber dieser behebt das Problem. Danke, es funktioniert elegant wie ein Zauber.
fsevenm

15

Sie können dieses Plugin verwenden (in eine js-Datei einfügen und über das Skript-Tag verwenden)

http://plugins.jquery.com/project/color

Und dann benutze so etwas:

jQuery.fn.flash = function( color, duration )
{

    var current = this.css( 'color' );

    this.animate( { color: 'rgb(' + color + ')' }, duration / 2 );
    this.animate( { color: current }, duration / 2 );

}

Dadurch wird allen jQuery-Objekten eine Flash-Methode hinzugefügt:

$( '#importantElement' ).flash( '255,0,0', 1000 );

12

Sie können die Methode von Desheng Li weiter erweitern, indem Sie zulassen, dass eine Iterationszählung mehrere Blitze wie folgt ausführt:

// Extend jquery with flashing for elements
$.fn.flash = function(duration, iterations) {
    duration = duration || 1000; // Default to 1 second
    iterations = iterations || 1; // Default to 1 iteration
    var iterationDuration = Math.floor(duration / iterations);

    for (var i = 0; i < iterations; i++) {
        this.fadeOut(iterationDuration).fadeIn(iterationDuration);
    }
    return this;
}

Dann können Sie die Methode mit einer Zeit und einer Anzahl von Blitzen aufrufen:

$("#someElementId").flash(1000, 4); // Flash 4 times over a period of 1 second

Geändert zu, var iterationDuration = Math.floor(duration / iterations);damit Sie durch ungerade Zahlen teilen können, und return this;so, dass Sie andere Methoden danach verketten können.
user1477388

Dies ändert jedoch nicht wirklich die Farbe von irgendetwas?
Nächte

12

Reine jQuery-Lösung.

(Keine jquery-ui / animieren / Farbe erforderlich.)

Wenn Sie nur diesen gelben "Flash" -Effekt wünschen, ohne die Abfragefarbe zu laden:

var flash = function(elements) {
  var opacity = 100;
  var color = "255, 255, 20" // has to be in this format since we use rgba
  var interval = setInterval(function() {
    opacity -= 3;
    if (opacity <= 0) clearInterval(interval);
    $(elements).css({background: "rgba("+color+", "+opacity/100+")"});
  }, 30)
};

Das obige Skript führt einfach das gelbe Ausblenden von 1s durch, um den Benutzer darüber zu informieren, dass das Element aktualisiert wurde oder ähnliches.

Verwendung:

flash($('#your-element'))

Ich

7

Dies ist möglicherweise eine aktuellere Antwort und kürzer, da die Dinge seit diesem Beitrag etwas konsolidiert wurden. Benötigt jquery-ui-effect-Highlight .

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

http://docs.jquery.com/UI/Effects/Highlight


7

Wie wäre es mit einer wirklich einfachen Antwort?

$('selector').fadeTo('fast',0).fadeTo('fast',1).fadeTo('fast',0).fadeTo('fast',1)

Blinkt zweimal ... das sind alle Leute!


Das blinkt nicht in einer anderen Farbe (die angefordert wurde), dies blendet einfach die Deckkraft ein und aus.
Tim Eckel

6

Ich kann nicht glauben, dass dies noch nicht zu dieser Frage gehört. Alles was du tun musst:

("#someElement").show('highlight',{color: '#C8FB5E'},'fast');

Dies macht genau das, was Sie wollen, ist super einfach, funktioniert sowohl für show()als auch für hide()Methoden.


15
Hinweis: Damit dies funktioniert, müssen die Effekte von jquery ui hinzugefügt werden. Es ist nicht Teil von Core jQuery
Travis-146

6

Würde ein Impulseffekt(offline) JQuery-Plugin für das, was Sie suchen, geeignet?

Sie können eine Dauer hinzufügen, um den Impulseffekt zeitlich zu begrenzen.


Wie von JP in den Kommentaren erwähnt, gibt es jetzt sein aktualisiertes Puls-Plugin .
Siehe sein GitHub-Repo . Und hier ist eine Demo .



Die Demo ist kaputt, weil die js-Bibliothek, auf die sie verweist, nicht existiert
PandaWood

@ PandaWood Ich habe den Link zum GitHub-Repo wiederhergestellt und die Demo aktualisiert
VonC

6
function pulse() {
    $('.blink').fadeIn(300).fadeOut(500);
}
setInterval(pulse, 1000);

1
Genau. Einfache und vollständige Kontrolle über das Ein- und Ausblenden.
Pollaris

5

Fand so viele Monde später, aber wenn es jemanden interessiert, scheint es eine gute Möglichkeit zu sein, etwas dauerhaft zum Blitzen zu bringen:

$( "#someDiv" ).hide();

setInterval(function(){
     $( "#someDiv" ).fadeIn(1000).fadeOut(1000);
},0)

4

Die folgenden Codes funktionieren für mich. Definieren Sie zwei Ein- und Ausblendfunktionen und fügen Sie sie in den Rückruf des anderen ein.

var fIn = function() { $(this).fadeIn(300, fOut); };
var fOut = function() { $(this).fadeOut(300, fIn); };
$('#element').fadeOut(300, fIn);

Folgendes steuert die Blinkzeiten:

var count = 3;
var fIn = function() { $(this).fadeIn(300, fOut); };
var fOut = function() { if (--count > 0) $(this).fadeOut(300, fIn); };
$('#element').fadeOut(300, fIn);

4

Ich suchte nach einer Lösung für dieses Problem, ohne mich auf die jQuery-Benutzeroberfläche zu verlassen.

Dies ist, was ich mir ausgedacht habe und es funktioniert für mich (keine Plugins, nur Javascript und jQuery); - Hier ist die funktionierende Geige - http://jsfiddle.net/CriddleCraddle/yYcaY/2/

Stellen Sie den aktuellen CSS-Parameter in Ihrer CSS-Datei als normales CSS ein und erstellen Sie eine neue Klasse, die nur den Parameter verarbeitet, um die Hintergrundfarbe zu ändern, und setzen Sie ihn auf '! Wichtig', um das Standardverhalten zu überschreiben. so was...

.button_flash {
background-color: #8DABFF !important;
}//This is the color to change to.  

Verwenden Sie dann einfach die folgende Funktion und übergeben Sie das DOM-Element als Zeichenfolge, eine Ganzzahl für die Häufigkeit, mit der der Flash auftreten soll, die Klasse, in die Sie ändern möchten, und eine Ganzzahl für die Verzögerung.

Hinweis: Wenn Sie eine gerade Zahl für die Variable 'times' übergeben, erhalten Sie die Klasse, mit der Sie begonnen haben, und wenn Sie eine ungerade Zahl übergeben, erhalten Sie die umgeschaltete Klasse. Beide sind nützlich für verschiedene Dinge. Ich benutze das 'i', um die Verzögerungszeit zu ändern, oder sie würden alle gleichzeitig feuern und der Effekt würde verloren gehen.

function flashIt(element, times, klass, delay){
  for (var i=0; i < times; i++){
    setTimeout(function(){
      $(element).toggleClass(klass);
    }, delay + (300 * i));
  };
};

//Then run the following code with either another delay to delay the original start, or
// without another delay.  I have provided both options below.

//without a start delay just call
flashIt('.info_status button', 10, 'button_flash', 500)

//with a start delay just call
setTimeout(function(){
  flashIt('.info_status button', 10, 'button_flash', 500)
}, 4700);
// Just change the 4700 above to your liking for the start delay.  In this case, 
//I need about five seconds before the flash started.  

3

Wie beim Einblenden / Ausblenden können Sie CSS / Delay animieren

$(this).stop(true, true).animate({opacity: 0.1}, 100).delay(100).animate({opacity: 1}, 100).animate({opacity: 0.1}, 100).delay(100).animate({opacity: 1}, 100);

Einfach und flexibel


3
$("#someElement").fadeTo(3000, 0.3 ).fadeTo(3000, 1).fadeTo(3000, 0.3 ).fadeTo(3000, 1); 

3000 ist 3 Sekunden

Von Deckkraft 1 wird es auf 0,3, dann auf 1 usw. ausgeblendet.

Sie können mehr davon stapeln.

Es wird nur jQuery benötigt. :) :)


2

Es gibt eine Problemumgehung für den animierten Hintergrundfehler. Diese Übersicht enthält ein Beispiel für eine einfache Hervorhebungsmethode und ihre Verwendung.

/* BEGIN jquery color */
  (function(jQuery){jQuery.each(['backgroundColor','borderBottomColor','borderLeftColor','borderRightColor','borderTopColor','color','outlineColor'],function(i,attr){jQuery.fx.step[attr]=function(fx){if(!fx.colorInit){fx.start=getColor(fx.elem,attr);fx.end=getRGB(fx.end);fx.colorInit=true;}
  fx.elem.style[attr]="rgb("+[Math.max(Math.min(parseInt((fx.pos*(fx.end[0]-fx.start[0]))+fx.start[0]),255),0),Math.max(Math.min(parseInt((fx.pos*(fx.end[1]-fx.start[1]))+fx.start[1]),255),0),Math.max(Math.min(parseInt((fx.pos*(fx.end[2]-fx.start[2]))+fx.start[2]),255),0)].join(",")+")";}});function getRGB(color){var result;if(color&&color.constructor==Array&&color.length==3)
  return color;if(result=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
  return[parseInt(result[1]),parseInt(result[2]),parseInt(result[3])];if(result=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))
  return[parseFloat(result[1])*2.55,parseFloat(result[2])*2.55,parseFloat(result[3])*2.55];if(result=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))
  return[parseInt(result[1],16),parseInt(result[2],16),parseInt(result[3],16)];if(result=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))
  return[parseInt(result[1]+result[1],16),parseInt(result[2]+result[2],16),parseInt(result[3]+result[3],16)];if(result=/rgba\(0, 0, 0, 0\)/.exec(color))
  return colors['transparent'];return colors[jQuery.trim(color).toLowerCase()];}
  function getColor(elem,attr){var color;do{color=jQuery.curCSS(elem,attr);if(color!=''&&color!='transparent'||jQuery.nodeName(elem,"body"))
  break;attr="backgroundColor";}while(elem=elem.parentNode);return getRGB(color);};var colors={aqua:[0,255,255],azure:[240,255,255],beige:[245,245,220],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgrey:[169,169,169],darkgreen:[0,100,0],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkviolet:[148,0,211],fuchsia:[255,0,255],gold:[255,215,0],green:[0,128,0],indigo:[75,0,130],khaki:[240,230,140],lightblue:[173,216,230],lightcyan:[224,255,255],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightyellow:[255,255,224],lime:[0,255,0],magenta:[255,0,255],maroon:[128,0,0],navy:[0,0,128],olive:[128,128,0],orange:[255,165,0],pink:[255,192,203],purple:[128,0,128],violet:[128,0,128],red:[255,0,0],silver:[192,192,192],white:[255,255,255],yellow:[255,255,0],transparent:[255,255,255]};})(jQuery);
  /* END jquery color */


  /* BEGIN highlight */
  jQuery(function() {
    $.fn.highlight = function(options) {
      options = (options) ? options : {start_color:"#ff0",end_color:"#fff",delay:1500};
      $(this).each(function() {
        $(this).stop().css({"background-color":options.start_color}).animate({"background-color":options.end_color},options.delay);
      });
    }
  });
  /* END highlight */

  /* BEGIN highlight example */
  $(".some-elements").highlight();
  /* END highlight example */

https://gist.github.com/1068231


2

Wenn das Einbinden einer Bibliothek übertrieben ist, gibt es hier eine Lösung, die garantiert funktioniert.

$('div').click(function() {
    $(this).css('background-color','#FFFFCC');
    setTimeout(function() { $(this).fadeOut('slow').fadeIn('slow'); } , 1000); 
    setTimeout(function() { $(this).css('background-color','#FFFFFF'); } , 1000); 
});
  1. Ereignisauslöser einrichten

  2. Stellen Sie die Hintergrundfarbe des Blockelements ein

  3. Verwenden Sie in setTimeout fadeOut und fadeIn, um einen kleinen Animationseffekt zu erstellen.

  4. Innerhalb des zweiten setTimeout wird die Standardhintergrundfarbe zurückgesetzt

    In ein paar Browsern getestet und es funktioniert gut.


2

Leider erfordert die Top-Antwort die JQuery-Benutzeroberfläche. http://api.jquery.com/animate/

Hier ist eine Vanille-JQuery-Lösung

http://jsfiddle.net/EfKBg/

JS

var flash = "<div class='flash'></div>";
$(".hello").prepend(flash);
$('.flash').show().fadeOut('slow');

CSS

.flash {
    background-color: yellow;
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
}

HTML

<div class="hello">Hello World!</div>

Wenn Sie nur flashein jQuery-Objekt erstellen, funktioniert es einwandfrei. var flash = $("<div class='flash'></div>"); $(".hello").prepend(flash); flash.show().fadeOut('slow');
Michael Blackburn

1

Hier ist eine leicht verbesserte Version der Colbeerhey-Lösung. Ich habe eine return-Anweisung hinzugefügt, damit wir Ereignisse in wahrer jQuery-Form nach dem Aufrufen der Animation verketten. Ich habe auch die Argumente hinzugefügt, um die Warteschlange zu löschen und zum Ende einer Animation zu springen.

// Adds a highlight effect
$.fn.animateHighlight = function(highlightColor, duration) {
    var highlightBg = highlightColor || "#FFFF9C";
    var animateMs = duration || 1500;
    this.stop(true,true);
    var originalBg = this.css("backgroundColor");
    return this.css("background-color", highlightBg).animate({backgroundColor: originalBg}, animateMs);
};

Hinweis: Für das Animieren von Hintergrundfarben muss das UI-Plugin für Farben verwendet werden. siehe: api.jquery.com/animate
Martlark

1

Dieser pulsiert die Hintergrundfarbe eines Elements, bis ein Mouseover-Ereignis ausgelöst wird

$.fn.pulseNotify = function(color, duration) {

var This = $(this);
console.log(This);

var pulseColor = color || "#337";
var pulseTime = duration || 3000;
var origBg = This.css("background-color");
var stop = false;

This.bind('mouseover.flashPulse', function() {
    stop = true;
    This.stop();
    This.unbind('mouseover.flashPulse');
    This.css('background-color', origBg);
})

function loop() {
    console.log(This);
    if( !stop ) {
        This.animate({backgroundColor: pulseColor}, pulseTime/3, function(){
            This.animate({backgroundColor: origBg}, (pulseTime/3)*2, 'easeInCirc', loop);
        });
    }
}

loop();

return This;
}

1

Stellen Sie dies aus all dem zusammen - eine einfache Lösung, um ein Element zu flashen und zur ursprünglichen Farbe zurückzukehren ...

$.fn.flash = function (highlightColor, duration, iterations) {
    var highlightBg = highlightColor || "#FFFF9C";
    var animateMs = duration || 1500;
    var originalBg = this.css('backgroundColor');
    var flashString = 'this';
    for (var i = 0; i < iterations; i++) {
        flashString = flashString + '.animate({ backgroundColor: highlightBg }, animateMs).animate({ backgroundColor: originalBg }, animateMs)';
    }
    eval(flashString);
}

Verwenden Sie wie folgt:

$('<some element>').flash('#ffffc0', 1000, 3);

Hoffe das hilft!


Hüte dich vor dem Bösen eval!
Birla

Ich weiß, ich brauchte nur eine schnelle und schmutzige Lösung. Eval hat manchmal seine Verwendung!
Duncan

1

Hier ist eine Lösung, die eine Mischung aus jQuery- und CSS3-Animationen verwendet.

http://jsfiddle.net/padfv0u9/2/

Im Wesentlichen ändern Sie zunächst die Farbe in Ihre "Blitz" -Farbe und verwenden dann eine CSS3-Animation, um die Farbe auszublenden. Sie müssen die Übergangsdauer ändern, damit der anfängliche "Blitz" schneller als das Überblenden ist.

$(element).removeClass("transition-duration-medium");
$(element).addClass("transition-duration-instant");
$(element).addClass("ko-flash");
setTimeout(function () {
    $(element).removeClass("transition-duration-instant");
    $(element).addClass("transition-duration-medium");
    $(element).removeClass("ko-flash");
}, 500);

Wo die CSS-Klassen wie folgt sind.

.ko-flash {
    background-color: yellow;
}
.transition-duration-instant {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    -o-transition-duration: 0s;
    transition-duration: 0s;
}
.transition-duration-medium {
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
}


1

Dies ist allgemein genug, damit Sie jeden Code schreiben können, den Sie animieren möchten. Sie können die Verzögerung sogar von 300 ms auf 33 ms verringern und Farben usw. verblassen lassen.

// Flash linked to hash.
var hash = location.hash.substr(1);
if (hash) {
    hash = $("#" + hash);
    var color = hash.css("color"), count = 1;
    function hashFade () {
        if (++count < 7) setTimeout(hashFade, 300);
        hash.css("color", count % 2 ? color : "red");
    }
    hashFade();
}

1

Sie können das jquery Pulsate-Plugin verwenden, um die Aufmerksamkeit auf jedes HTML-Element zu lenken und die Geschwindigkeit, Wiederholung und Farbe zu steuern.

JQuery.pulsate () * mit Demos

Beispielinitialisierer:

  • $ (". puls4"). pulsate ({speed: 2500})
  • $ (". CommandBox-Taste: sichtbar"). Pulsieren ({Farbe: "# f00", Geschwindigkeit: 200, Reichweite: 85, Wiederholung: 15})
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.