jquery returning to original state on mouseout

Question

We are changing a number of things in our html on hover:

$('.zentriert')
.hover(function(){
    if(!$(this).is(".open")) {
    $(this).animate({opacity: 1}, 150);
    $(this).find('img').css({'position': 'relative'}).animate({top: -10}, 150);
    $(this).find('.beschreibung').css({'display': 'block'}).animate({opacity: 1, top: -10}, 150);
    $(this).addClass('open')
    }})

What's the best way to return everything to its original state on mouseout? This ISN'T working:

$('.zentriert')
.mouseout(function(){
    if($(this).is(".open")) {
    $(this).animate({opacity: 0.17}, 150);
    $(this).find('img').animate({top: 10}, 150);
    $(this).find('.beschreibung').animate({opacity: 0, top: 10}, 150).css({'display': 'none'});
    $(this).removeClass('open')
    }})

Thanks in advance for any help!

Answer 1

The hover event in jQuery takes 2 callback functions. The first one is triggered when user hover the item and the second for when it leaves

Try

$(".zentriert").hover(
   function() {
     if(!$(this).is(".open")) {
    $(this).animate({opacity: 1}, 150);
    $(this).find('img').css({'position': 'relative'}).animate({top: -10}, 150);
    $(this).find('.beschreibung').css({'display': 'block'}).animate({opacity: 1, top: -10}, 150);
    $(this).addClass('open')
    }
   },
   function() {
     if($(this).is(".open")) {
    $(this).animate({opacity: 0.17}, 150);
    $(this).find('img').animate({top: 10}, 150);
    $(this).find('.beschreibung').animate({opacity: 0, top: 10}, 150).css({'display': 'none'});
    $(this).removeClass('open')
    }
   }
);