Упрощая 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 затем -> ширина одушевленные: х, при наведении курсора над #blog затем -> ширина одушевленные: хх, и т.д., и т.д., еще if -> aimate width: 40px

Мне очень хотелось бы узнать, поэтому, даже если вы не хотите компилировать код, я был бы умен, даже если бы вы просто указали мне в правильном направлении.

Cheers.

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

fiddle