HTML-Elemente wie Grafiken mit jQuery blinken lassen (ausblenden/einblenden)

Mit Hilfe dieser kleinen jQuery JavaScript-Funktion können HTML-Elemente auf einfacher Weise aus- und eingebendet werden, damit es so aussieht, als ob dieses Element blinken würden.

Beispiel:

JavaScript-Code

(function($) {
     $.fn.blinkElement = function(delay,duration){
         duration = duration || 300;
         var elem = $(this);
         elem.delay(delay).animate({opacity:0.1},duration,'linear',
             function(){
                 elem.animate({opacity:1},duration,'linear');
                 elem.delay(duration).blinkElement(delay);
         });	
     };
})(jQuery);   

Parameter:
delay (in Millisekunden):
Mit diesem Parameter kann gesteuert werden, mit welcher Verzögerung die Funktion ausgeführt werden soll.

duration (in Millisekunden – optional):
Mit diesem Parameter kann die Geschwindigkeit der Dauer für das ein- ausblenden angegben werden.

Der einfachheitshalber wurde diese Function gleich zu einem eigenen jQuery-Plugin, damit diese einfacher aufgerufen werden kann. Die Funktion wird außerhalb von $(document).ready initialisiert.

Um dan z. B. alle Elemente mit der CSS-Klasse „blink“ blinken zu lassen, kann die jQuery-Funktion nun z.B. so aufgerufen werden.

JS-Code

jQuery(document).ready(function ($) {
  $(".blink").blinkElement(500);
});