将jquery调用合并到一个函数中

我有以下jquery，它可以在悬停时设置动画：

        $('#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});
        });

等等

我怎样才能将这些结合到识别哪个链接被悬停（即：footerNetwork）并以适当的div为目标进行动画（popupNetwork）的on函数中？？

---

谢谢

我假设您在要添加悬停行为的项目上有一个类

foo

。然后只需遵循（明显的）

footer…

模式：

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

---

根据文档的结构，您还可以通过其容器而不是类来识别“footer…”元素。

由于偏移量不是固定的，因此不可能通过一次调用获得相同的结果，但是，类似这样的函数可以实现以下目的：

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});
    });
}

然后只需为每个动画调用函数：

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

我想这样好多了。当它们很多时，您可以使用以下内容：

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]);
}

var hover=[['Network'，-80,30,300]，
[Port'，-62,30]，
[‘机场’，-62，30]；
对于（变量i=0；i

---

注意：未测试

您可以执行以下操作：

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);
});

如果向这些元素添加一个类，例如

class=“footer”

，则可以将{使它更干净。要获得适当的

#popup uuuuuuuuuuuu

元素，我们只需获取当前ID，例如

footerNetwork

并执行一个操作来获得popup ID。

tops

对象用于存储各种top值，因为它们不同