Question

I have the following jquery which animates on hover:

        $('#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…

how can I combine these into on function which recognises which link has been hovered (ie: footerNetwork) and targets the appropriate div to animate (popupNetwork)??
thanks!

Answer 1

I’ll assume you have a class foo on the items to which you want to add the hover behavior. Then it’s just a matter of following the (apparent) footer... pattern:

$(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({...});
    }
  );
});

Depending on how your document is structured, you could also identify the “footer…” elements by their container, rather than by class.