Question

The following code is giving me a lot of trouble. To note, .hover changes the background image. Firstly, how can I combine the two with .hover rather than a separate mouseenter and mouseleave? Second, How can I make it so that while the div is shifting upwards, the background image is simultaneously fading?

$('div.designbox.orangehello').mouseenter(function() {
   $('div.designbox.orangehello').animate({
     top: '-=10',
   }, 55, function() {
     $(this).addClass('hover');
   });
 });

 $('div.designbox.orangehello').mouseleave(function() {
   $('div.designbox.orangehello').animate({
     top: '+=10',
   }, 55, function() {
     $(this).removeClass('hover');
   });
 });

Answer 1

To combine the two using .hover(), do this:

$('div.designbox.orangehello').hover(function() {
   $(this).animate({ top: '-=10' }, 55, function() {
     $(this).addClass('hover');
   });
}, function() {
   $(this).animate({ top: '+=10' }, 55, function() {
     $(this).removeClass('hover');
   });
});

As for the fading, you’ll need to post your markup, you’ll need an additional <div> or something containing the other background.

A few other notes, you have { top: '-=10', } for your animation arguments…watch out for those trailing commas, they’ll give you trouble, especially in IE. Also, you had $('div.designbox.orangehello') inside, if you’re animating lots of these, change this back, but if you want the current one only use $(this) like I have above.