Cette solution autonome fera clignoter le texte un nombre spécifié de fois, puis s'arrêtera.
Le clignotement utilise l'opacité, plutôt que d'afficher / masquer, de fondre ou de basculer afin que le DIV reste cliquable, au cas où cela poserait un problème (vous permet de créer des boutons avec du texte clignotant).
jsFiddle ici (contient des commentaires supplémentaires)
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var init = 0;
$('#clignotant').click(function() {
if (init==0) {
init++;
blink(this, 800, 4);
}else{
alert('Not document.load, so process the click event');
}
});
function blink(selector, blink_speed, iterations, counter){
counter = counter | 0;
$(selector).animate({opacity:0}, 50, "linear", function(){
$(this).delay(blink_speed);
$(this).animate({opacity:1}, 50, function(){
counter++;
if (iterations == -1) {
blink(this, blink_speed, iterations, counter);
}else if (counter >= iterations) {
return false;
}else{
blink(this, blink_speed, iterations, counter);
}
});
$(this).delay(blink_speed);
});
}
//This line must come *AFTER* the $('#clignotant').click() function !!
window.load($('#clignotant').trigger('click'));
}); //END $(document).ready()
</script>
</head>
<body>
<div id="clignotant" style="background-color:#FF6666;width:500px;
height:100px;text-align:center;">
<br>
Usage: blink(selector, blink_speed, iterations) <br />
<span style="font-weight:bold;color:blue;">if iterations == -1 blink forever</span><br />
Note: fn call intentionally missing 4th param
</div>
</body>
</html>
Sources:
Danny Gimenez
Moses Christian