fadeto에서 슬라이드 업으로 전환

Question

아래 코드에서 마우스를 놓은 후 div에 마우스를 올려 놓고 마우스를 놓으면 페이드 아웃합니다. 이 작업을 수행하는 가장 쉬운 방법은 무엇입니까?

$(window).load(function(){ 
     $('div.description').each(function(){ 
     $(this).css('opacity', 0); 
     $(this).css('width', $(this).siblings('img').width()); 
     $(this).parent().css('width', $(this).siblings('img').width()); 
     $(this).css('display', 'block'); 
    }); 

    $('div.wrapper').hover(function(){  
     $(this).children('.description').stop().fadeTo(700, 0.8); 
    },function(){ 
     $(this).children('.description').stop().fadeTo(700, 0); 
    }); 

}); 

Answer 1

$('div.wrapper').mouseenter(function(){  
    $(this).children('.description').stop().fadeTo(700, 0.8); 
}).mouseleave(function(){ 
    $(this).children('.description').stop().slideUp(700); 
}); 

매우 간단합니다. 코드가 작동한다는 보장은 없지만 올바른 생각입니다. 래퍼 div 내에서 요소를 변경할 때마다 트리거되지 않으므로 mouseenter와 mouseleave를 사용해야합니다. 마우스가 div의 경계에 들어가면 마우스를 매우 잘 떠올리게 할 것입니다.

이것이 문제가 될지는 기억이 나지 않지만 믿을 수는 없습니다. div가 slideUp() 이후 height:0 인 경우 slideDown(0) 일 수 있으며 hide() 일 전에 fadeTo()이 표시 될 수 있습니다.