2010-12-15 4 views

Répondre

20

html

<div class="blink">blinking text</div> 

jquery

function blink(selector){ 
$(selector).fadeOut('slow', function(){ 
    $(this).fadeIn('slow', function(){ 
     blink(this); 
    }); 
}); 
} 

blink('.blink'); 

Démo: http://www.jsfiddle.net/gaby/Vaysf/1/


Mise à jour (pour mettre la réponse à jour)

Vous n'avez plus besoin d'utiliser jQuery pour de tels effets. Vous pouvez le faire avec juste CSS (en utilisant CSS animations).
(table de compatibilité à http://caniuse.com/#feat=css-animation)

CSS (en utilisant les propriétés standard)

.blink{ 
    animation:blink 700ms infinite alternate; 
} 

@keyframes blink { 
    from { opacity:1; } 
    to { opacity:0; } 
}; 

Demo (avec le fournisseur propriétés préfixées) à http://jsfiddle.net/gaby/Vaysf/649/

+0

Si vous vouliez simplement faire clignoter la couleur arrière Div et non le texte, comment feriez-vous cela? –

+0

avec css au lieu d'animer l'opacité animer le canal alpha en utilisant rgba. 'de {background-color: rgba (0,0,0,1); } à {background-color: rgba (0,0,0,0); } '(* pour le noir *) –

1

En supposant que votre div a id="blinkMe"

setInterval(function() { 
    var vis = $("#blinkMe").css("visibility"); 
    vis = (!vis || vis == "visible") ? "hidden" : "visible"; 
    $("#blinkMe").css("visibility", vis); 
}, 500); 

Note: utilisé « visibilité » et non « affichage »/.toggle() puisque celui-ci entraînera la mise en page de déplacer autour pendant que le div clignote.

Questions connexes