.append() une seule fois ??? il est ajouté cinq fois dans la tête

Question

Si vous regardez à travers ce peu de script où vous voyez alert ('hé'), ceci est ajouté cinq fois dans la tête du document ... il ne pose pas de problème mais je veux savoir comment le faire arriver une seule fois ???

$('#logo').fadeIn(2000, function() { 
     $(this).animate({ top: "-=20px" },{ 
     duration: 1000, 
     specialEasing: {top: 'easeOutQuad', left: 'easeInQuad'},  
      complete: function() { 
       $(this).animate({ top: "63px" },{ 
       duration: 1000, 
       specialEasing: {top: 'easeOutQuad', left: 'easeInQuad'},  
        complete: function() { 
        } 
       }); 
       $('.home,.about,.investments,.media,.contact').animate({ top: "+=106px" },{ 
       duration: 2000, 
       specialEasing: {top: 'easeOutQuad', left: 'easeOutQuad'},  
        complete: function() { 
         $('#ballTarp').remove(); 
         $("head").append('<link href="css/hoverStates.css" rel="stylesheet" type="text/css">'); 
         alert('hey'); 
         $('#ball').removeClass('home').addClass('activeHome'); 
         $('.activeTitle').fadeIn("fast"); 
         $('.dropShadow').fadeIn(7000); 
         $('footer').fadeIn("fast"); 
         $('.title').fadeIn("slow"); 
         $('.login').fadeIn(3000); 
        } 
       }); 
      } 
    }); 

Answer 1

qu'il appelle la fonction complète pour chacun de vos sélecteurs (.home, .sur, .investments, .media, .Contact).

C'est pourquoi il est ajouté 5 fois.

Cela devrait fonctionner ...

$('#logo').fadeIn(2000, function() { 
    $(this).animate({ top: "-=20px" },{ 
    duration: 1000, 
    specialEasing: {top: 'easeOutQuad', left: 'easeInQuad'},  
     complete: function() { 
      $(this).animate({ top: "63px" },{ 
      duration: 1000, 
      specialEasing: {top: 'easeOutQuad', left: 'easeInQuad'},  
       complete: function() { 
       } 
      }); 
      $('.home,.about,.investments,.media,.contact').animate({ top: "+=106px" },{ 
      duration: 2000, 
      specialEasing: {top: 'easeOutQuad', left: 'easeOutQuad'},  
       complete: function() { 
        $('#ballTarp').remove(); 
        // not here... 
        $('#ball').removeClass('home').addClass('activeHome'); 
        $('.activeTitle').fadeIn("fast"); 
        $('.dropShadow').fadeIn(7000); 
        $('footer').fadeIn("fast"); 
        $('.title').fadeIn("slow"); 
        $('.login').fadeIn(3000); 
       } 
      }, function(){ 
       // but here... 
       $("head").append('<link href="css/hoverStates.css" rel="stylesheet" type="text/css">'); 
       alert('hey'); 

      }); 
     } 
}); 

Answer 2

Il est parce qu'il est en cours d'exécution 5 fois, une fois chacun pour chaque élément de votre sélecteur.

$('.home,.about,.investments,.media,.contact') 

Answer 3

bien OK Merci @teewuane et @epascarello pour me faire voir l'évidence ... #brainFart mais voici comment je l'ai fixé

$('#logo').fadeIn(2000, function() { 
     $(this).animate({ top: "-=20px" },{ 
     duration: 1000, 
     specialEasing: {top: 'easeOutQuad', left: 'easeInQuad'},  
      complete: function() { 
       $(this).animate({ top: "63px" },{ 
       duration: 1000, 
       specialEasing: {top: 'easeOutQuad', left: 'easeInQuad'},  
        complete: function() { 
        } 
       }); 
       $('.home,.about,.investments,.media,.contact').animate({ top: "+=106px" },{ 
       duration: 2000, 
       specialEasing: {top: 'easeOutQuad', left: 'easeOutQuad'},  
        complete: function() { 
         $('#ballTarp').remove(); 
         $('#ball').removeClass('home').addClass('activeHome'); 
         $('.activeTitle').fadeIn("fast"); 
         $('.dropShadow').fadeIn(7000); 
         $('footer').fadeIn("fast"); 
         $('.title').fadeIn("slow"); 
         $('.login').fadeIn(3000); 
        } 
       }); 
       $("head").append('<link href="css/hoverStates.css" rel="stylesheet" type="text/css">'); 
      } 
    });