Texte clignotant jQuery

Question

Quel est le moyen le plus simple de faire clignoter du texte en jQuery et un moyen de l'arrêter ? Cela doit fonctionner pour IE, FF et Chrome. Merci

Answer 1

Un plugin pour faire clignoter un texte me semble un peu excessif...

Essayez ceci...

$('.blink').each(function() {
    var elem = $(this);
    setInterval(function() {
        if (elem.css('visibility') == 'hidden') {
            elem.css('visibility', 'visible');
        } else {
            elem.css('visibility', 'hidden');
        }    
    }, 500);
});

Answer 2

Essayez d'utiliser ce plugin blink

Par exemple

$('.blink').blink(); // default is 500ms blink interval.
//$('.blink').blink(100); // causes a 100ms blink interval.

Il s'agit également d'un plugin très simple, et vous pourriez probablement l'étendre pour arrêter l'animation et la relancer à la demande.

Answer 3

Voici le clignotement avec animation :

$(".blink").animate({opacity:0},200,"linear",function(){
  $(this).animate({opacity:1},200);
});

Il suffit de donner une classe de clignotement à ce que vous voulez clignoter :

<div class="someclass blink">some text</div>

tout le respect dû à DannyZB sur #jquery

caractéristiques :

• ne nécessite aucun plugin (sauf JQuery lui-même)
• fait la chose

Answer 4

Si vous préférez ne pas utiliser jQuery, vous pouvez le faire avec CSS3.

@-webkit-keyframes blink {  
  from { opacity: 1.0; }
  to { opacity: 0.0; }
}

blink {
  -webkit-animation-name: blink;  
  -webkit-animation-iteration-count: infinite;  
  -webkit-animation-timing-function: cubic-bezier(1.0,0,0,1.0);
  -webkit-animation-duration: 1s; 
}

Ça semble fonctionner dans Chrome, mais j'ai cru entendre un léger bruit de sanglot.

Answer 5

En combinant les codes ci-dessus, je pense que c'est une bonne solution.

function blink(selector){
    $(selector).animate({opacity:0}, 50, "linear", function(){
        $(this).delay(800);
        $(this).animate({opacity:1}, 50, function(){
        blink(this);
        });
        $(this).delay(800);
    });
}

Au moins, ça fonctionne sur mon site web. http://140.138.168.123/2y78%202782