的jQuery回到原來的狀態鼠標移開時

Question

我們正在改變懸停很多事情在我們的HTML：

$('.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') 
    }}) 

什麼是一切恢復到原來的狀態，鼠標移開時的最佳方式是什麼？這是行不通的：

$('.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') 
    }}) 

在此先感謝您的幫助！

Answer 1

jQuery中的懸停事件需要2個回調函數。當用戶將鼠標懸停在項和第二離開時第一個被觸發

嘗試

$(".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') 
    } 
    } 
);