javascript - 如何在使用.stop时让.slideDown和.slideUp完成动画？

Question

我使用 jQuery 组合了一个非常简单的悬停效果。 jsFiddle(如下)仅显示一张图像，但理想情况下这适用于图像网格。

我已经成功完成了大部分工作，只需要稍微调整一下。

当光标悬停在图像上时，.description div 向上滑动，当光标离开悬停区域(图像)时，它向下滑动。

我使用 .stop(true,false) 来避免动画构建，并允许动画完成。

我还使用 .delay(800); 这使得 .slideDown(600) 在下滑之前等待。

我希望能够在 .description div 上下滑动时淡入淡出。

我不知道如何做到这一点...任何帮助或正确方向的插入将不胜感激。

jQuery

$(document).ready( function() {

    $(".description").addClass("hide");

    $('.item').hover(
      function () {
        $(this).find('.description').stop(true,false).slideDown(600).delay(800);
      }, 
      function () {
        $(this).find('.description').slideUp(600);
     }
   );  
});

See jsFiddle below for HTML and CSS

Answer 1

您可以使用.animate()

Demo

.animate(
    {
        opacity: 0
    }, 
    {
        queue: false,
        duration: 600
    });