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);
});   
HTML-Elemente wie Grafiken mit jQuery blinken lassen (ausblenden/einblenden)

4 Gedanken zu „HTML-Elemente wie Grafiken mit jQuery blinken lassen (ausblenden/einblenden)

  • Z. B. sollte das funktionieren:

    setTimeout(function(){
    $(„.blink“).stop(true, true);
    }, 5000);

    Man könnten z. B. auch eine CSS Klasse setzen. Dann in der Animate-Funktion abfragen, wenng setzt, dann nicht mehr die „blinkElement“ mehtode aufrufen

  • Danke für die schnelle Antwort.
    Also programmgesteuert geht das bei mir jetzt so:

  • Image blinken an:
    $(‚#image_id).blinkElement(900);
    dann je nach Programmfluß:
    $(‚#image_id).stop(true, true);

    Sorry für den gestückelten Kommenter.
    Die Touchpads…. !

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.