3. August 2010

jQuery Element Blinken lassen

3. August 2010 - Geschrieben von Martin - 4 Kommentare

Blinkende Gifs, man sieht sie nicht mehr allzu oft, aber dennoch sind sie manchmal brauchbar, um dem Benutzer etwas zu signalisieren. Leider kann man diese schlecht handhaben, denn ein mal erstellt, müsste man bei einer Änderung wieder von vorne beginnen.

Warum also nicht JavaScript dazu verwenden? Mit dieser kleinen Funktion kann man ein Element blinken lassen. Und zwar wird es erst versteckt und dann wieder eingeblendet (jQuery muss natürlich vorhanden sein):

function blink(elm, msec, speed) {
  $(elm).hide();
  $(elm).fadeIn(speed);
  window.setTimeout("blink('" + elm + "', " + msec + ", '" + speed + "')", msec);
}

elm – sagt welches Element blinken soll, z.B. „#messageIcon“
msec – die Anzahl der Milisekunden, bis die Funktion erneut aufgerufen wird. Hier sollte allerdings beachtet werden, das der Effekt auch eine gewisse Zeit benötigt, und der Nutzer durch schnelle Zeiten gestört werden könnte.
speed – gibt die Geschwindigkeit an, entweder „fast“ oder „slow“.

4 Antworten zu “jQuery Element Blinken lassen”

  1. Marc sagt:

    Ist auf jeden Fall sauberer:

    function blink(elm, msec, speed) {
    $(elm).hide();
    $(elm).fadeIn(speed);
    window.setTimeout(
    function() {
    blink(elm, msec, speed);
    },
    msec
    }

  2. schnickers sagt:

    Funktionierte bei mit nicht ganz korrekt.

    Habe es nun so umgeändert:

    function doFadeIn(classname, speed) {
    $(„.“+classname).fadeIn(speed);
    window.setTimeout(„doFadeOut(‚“ + classname + „‚, “ + speed + „)“, speed);
    }

    function doFadeOut(classname, speed) {
    $(„.“+classname).fadeOut(speed);
    window.setTimeout(„doFadeIn(‚“ + classname + „‚, “ + speed + „)“, speed);
    }

    $(document).ready(function(){
    //effectFadeIn(‚band‘);
    doFadeOut(‚band‘, 3000);
    });

  3. Stefan sagt:

    Also ich wollte mein div auf diese Weise blinken lassen, aber habe keine Ahnung, wieso es nicht funktioniert. :/

    function BLINKEN(buttonID) {
    var bgCyan = document.getElementById(buttonID).style.backgroundColor=“cyan“;
    var bgMagenta = document.getElementById(buttonID).style.backgroundColor=“magenta“
    for (var i = 0, i < 1, i = 0) {
    window.setTimeout(bgMagenta,100);
    window.setTimeout(bgCyan,100);
    }
    }

  4. Martin sagt:

    Du startest unendlich oft im selben Moment(!) die Änderung von deinem Startwert nach Magenta und dann wieder nach Cyan. Das sollte eigentlich den Browser zum Einfrieren bringen.

    Du musst nach der Farbänderung die jeweils andere Funktion mit einem Timeout aufrufen. z.B.

    function BLINKEN(buttonID) {
        var bgCyan = function() {
            document.getElementById(buttonID).style.backgroundColor=”cyan”;
            setTimeout(bgMagenta, 100);
        };
        var bgMagenta = function() {
            document.getElementById(buttonID).style.backgroundColor=”magenta”;
            setTimeout(bgCyan, 100);
        };
        bgCyan();
    }


    der Code sollte funktionieren :)

Schreibe einen Kommentar