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