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
    });

Answer 2

试试这个，随着它的上下变化。我将实际内容与描述分开，因此当幻灯片位于描述

时，可以对其进行淡入淡出

http://jsfiddle.net/jcvzx9hr/24/

HTML

<div class="item">
    <img src="http://placehold.it/239x179" alt="Demo">
    <div class="description">
        <div class="content">
            <p> <strong>Project Name Here</strong>

            </p>
            <p class="intro"> <em>Duis ornare interdum ornare integer id vulputate sapien suspendisse quis mauris enim proin eleifend pharetra orci, quis feugiat massa molestie non.</em>

            </p> <a class="btn" href="#">View case study</a>

        </div>
    </div>
</div>

JS

$(document).ready(function () {

    $(".description").addClass('hide');
    $('.content').fadeOut(0);

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

      function () {
        $(this).find('.description').slideUp(600);
        $(this).find('.content').fadeOut(600);
      }
    );
});

更新 - 淡化蓝色背景，只需将背景移动到内容div

http://jsfiddle.net/jcvzx9hr/27/

.item {
    margin: 0 5px 0px 5px;
    float: left;
    width: 239px;
    position: relative;
}
.content {
    width: 100%;
    height: 100%;
    background: #179CFE;
    padding-top: 5px;
}

如何在使用.stop时允许.slideDown和.slideUp完成动画？

2 个答案: