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?

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

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

function go1() { $("#demo1").fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100)}

function go2() { $('#demo2').delay(100).fadeOut().fadeIn('slow') }

#demo1,
#demo2 {
  text-align: center;
  font-family: Helvetica;
  background: IndianRed;
  height: 50px;
  line-height: 50px;
  width: 150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="go1()">Click Me</button>
<div id='demo1'>My Element</div>
<br>
<button onclick="go2()">Click Me</button> (from comment)
<div id='demo2'>My Element</div>

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

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

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

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

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

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

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

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

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

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

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!

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.

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 .

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

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)

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

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.  

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

$("#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. :) :)

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

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.

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>

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

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

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!

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

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

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

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