if-statement - 简化 jQuery - 简单

Question

我不是最擅长编译java，但这是我能想到的最好的：

http://jsfiddle.net/p77wC/

我只是在考虑简化以下脚本：

$('#about')
  .hover(function() {
    $('#bg_mask').stop().animate({ "height": "100px", }, '1500');
  }, function() {
    $('#bg_mask').stop().animate({ "height": "40px", }, '1500');
  });

$('#blog')
  .hover(function() {
    $('#bg_mask').stop().animate({ "height": "180px", }, '1500');
  }, function() {
    $('#bg_mask').stop().animate({ "height": "40px", },'1500');
  });
$('#contact')
  .hover(function() {
    $('#bg_mask').stop().animate({ "height": "250px", }, '1500');
  }, function() {
    $('#bg_mask').stop().animate({ "height": "40px", },'1500');
  });

我确信有一个 if 和 else 语句可以用来总结/简化我正在做的事情。

基本上这就是我要找的：

如果将鼠标悬停在#about 然后 -> 动画宽度：x，如果将鼠标悬停在 #blog 然后 -> 动画宽度：xx 等，否则如果 -> 动画宽度：40px

我很想学习，所以即使你不愿意编译代码，即使你只是给我指出了正确的方向，我也会很感激。

干杯。

Answer 1

function process(id, height) {  
  $("#" + id).hover(function() {
    $('#bg_mask').stop().animate({ "height": height + "px", }, '1500');
  }, function() {
    $('#bg_mask').stop().animate({ "height": "40px", }, '1500');
  });
}

process("about",   100);
process("blog",    100);
process("contact", 250);

Answer 2

好的，这是一个不需要任何额外代码的版本，循环遍历每个代码并根据粗略的数学为它们提供动画。

$('#menu_wrapper div:not(#bg_mask)').each(function(i) {
    $(this).data('animID',i-1);
    $(this).hover(function() {           
        $('#bg_mask').stop().animate({ "height": ((($(this).data('animID')*80)+100)-10)+"px" }, '1500');
      }, 
      function() {
            $('#bg_mask').stop().animate({ "height": "40px" },'1500');
      });
});

​</p>

小提琴