Simplifying jQuery - easy - if-statement

Question

I'm not the best at compiling java but this was the best I could come up with:
http://jsfiddle.net/p77wC/
I'm just looking into simplifying the following script:
$('#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');
});
I'm sure there's an if and else statement that could be written up to summarize/simplify what I'm doing.
basically this is what im looking for:
if hover over #about then ->animate width:x,
if hover over #blog then ->animate width:xx,
etc, etc,
else if -> animate width:40px
I would love to learn, so even if you're not willing to compile the code then I would be greatful even if you just pointed me in the right direction.
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

Ok heres a version which does not require any extra code, loops through each and give them a animation based on a rough maths.
$('#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