jQuery: diviser div dans et sortir plusieurs fois

Question

J'ai un div en haut d'une page que je voudrais fondre en 3 fois. J'ai déjà trouvé une question/réponse qui montre comment fondre avec une boucle infinie en mettant les effets de fondu dans une fonction qui s'appelle elle-même, mais je me demandais quelle était la meilleure façon de spécifier un nombre fini de cycles de fondu. Jusqu'à présent, ce que j'ai (volé un autre poste de StackOverflow):

function fade() { 
     $("#notification").animate({opacity: 1.0}, {duration: 500}) 
      .animate({opacity: 0}, {duration: 500}) 
      .animate({opacity: 0}, {duration: 500}) 
      .animate({opacity: 1.0}, {duration: 500, complete: fade}) 
    } 

Toutes mes excuses à l'avance pour être un noob js.

Answer 1

Si vous utilisez la dernière version de jQuery (1.4 de cette écriture), vous pouvez spécifier un tel cycle court avec appels de fonction droite:

$("#notification").fadeIn(500).fadeOut(500).delay(500) 
        .fadeIn(500).fadeOut(500).delay(500) 
        .fadeIn(500).fadeOut(500); 

delay a été introduit dans jQuery 1.4.

Si la répétition vous dérange, vous pouvez en faire un plugin:

$.fn.pulsate = function(number, time){ 
    for(var i = 0; i < number; i++){ 
     this.fadeIn(time).fadeOut(time); 
     if(i != number - 1) this.delay(time); 
    } 
    return this; 
} 

Il pourrait alors être utilisé comme ceci:

$("#notification").pulsate(3, 500); 

Answer 2

Je pense qu'il serait préférable de l'utiliser dans le rappel . Créer une fonction récursive avec limite d'évanouissement.

animation(max, total) { 
    if (total < max) $(...).animate(..., animation(max, total + 1)); 
}