combiner jquery remet en 1 fonction

Question

je le jquery suivant qui anime le vol stationnaire:

 $('#footerNetwork').hover(function(){ 
      $('#popupNetwork').animate({top:'-62px'},{queue:true,duration:500}); 
     }, function(){ 
      $('#popupNetwork').animate({top:'30px'},{queue:true,duration:500}); 
     }); 

     $('#footerPort').hover(function(){ 
      $('#popupPort').animate({top:'-62px'},{queue:true,duration:500}); 
     }, function(){ 
      $('#popupPort').animate({top:'30px'},{queue:true,duration:500}); 
     }); 

     $('#footerAirport').hover(function(){ 
      $('#popupAirport').animate({top:'-62px'},{queue:true,duration:500}); 
     }, function(){ 
      $('#popupAirport').animate({top:'30px'},{queue:true,duration:500}); 
     }); 

etc ...

comment puis-je combiner en la fonction qui reconnaît que le lien a été plané (ie: footerNetwork) et cible le div approprié pour animer (popupNetwork) ?? merci!

Answer 1

Je suppose que vous avez une classe foo sur les articles auxquels vous voulez ajouter le comportement de vol stationnaire. Ensuite, il est juste une question de suivre (apparent) footer... modèle:

$(document).ready(function(){ 
    $('.foo').hover( 
    function(){ 
     $('#popup' + this.id.substr(6,this.id.length-6)).animate({...}); 
     //       ^remove "footer" portion of id 
    }, 
    function(){ 
     $('#popup' + this.id.substr(6,this.id.length-6)).animate({...}); 
    } 
); 
}); 

Selon la façon dont votre document est structuré, vous pouvez également identifier les éléments « Pied de page ... » par leur contenant, plutôt que par classe.

Answer 2

Étant donné que les compensations ne sont pas fixes, ce n'est pas vraiment possible d'obtenir le même résultat avec un appel, mais une fonction comme celui-ci fera l'affaire:

function hoverIt(name, topIn, topOut, duration) 
    duration = (duration != undefined) ? duration : 500; 

    $('#footer' + name).hover(function(){ 
     $('#popup' + name).animate({top: topIn + 'px'}, 
          {queue: true, duration: duration}); 
    }, function(){ 
     $('#popup' + name).animate({top: topOut + 'px'}, 
          {queue: true, duration: duration}); 
    }); 
} 

Ensuite, il suffit d'appeler la fonction pour chaque animation :

hoverIt('Network', -80, 30, 300); 
hoverIt('Port', -62, 30); 
hoverIt('Airport', -62, 30); 

Est beaucoup mieux je suppose. Quand il y aura beaucoup d'entre eux, vous pouvez utiliser quelque chose comme:

var hovers = [['Network', -80, 30, 300], 
       ['Port', -62, 30], 
       ['Airport', -62, 30]]; 

for (var i = 0; i < hovers.length; i++) { 
    hoverIt(hovers[i][0], hovers[i][1], hovers[i][2], hovers[i][3]); 
} 

Note: Non testé

Answer 3

Vous pouvez faire quelque chose comme ceci:

var tops = { footerNetwork:'-80px', footerPort:'-62px', footerAirport:'-62px' }; 
$('#footerNetwork, #footerPort, #footerAirport').hover(function(){ 
    $('#'+this.id.replace('footer','popup')).animate({top: tops[this.id]}, 500); 
}, function(){ 
    $('#'+this.id.replace('footer','popup')).animate({top:'30px'}, 500); 
}); 

Si vous ajoutez une classe à ces éléments dire class="footer" alors vous pouvez changer le .hover()-$('.footer').hover(function(){ pour le rendre encore plus propre. Pour obtenir l'élément #popup_____ approprié, nous prenons simplement l'ID actuel, par ex. footerNetwork et de faire un .replace() pour obtenir l'ID popup. L'objet tops permet de stocker les différentes valeurs supérieures car elles diffèrent.