javascript - 将鼠标悬停以显示叠加层 - 几乎就在那里，只需要一些调整

Question

我已经成功地拼凑出了一个相当不错的 jQuery“将鼠标悬停在图像上以显示叠加层”，但是有一些小问题我希望 jQuery 方面更好的人能够提供帮助。

底部有一个 JSFiddle 的链接

用户将鼠标悬停在图像上，叠加层从底部向上滑动。

我希望它也能在移动设备上运行。通过在移动设备上进行测试，悬停有效，但覆盖层仍然可见，因此我添加了关闭按钮。

两个问题:

1. 关闭按钮使用slideDown来隐藏覆盖层，这会弄乱slideToggle。 还有其他方法可以隐藏叠加层吗？我正在使用 .hide 在页面加载时隐藏叠加层。

2. 我使用 stop() 来停止在悬停时建立动画，效果很好，但如果在动画完成之前将鼠标拉开，则会产生相当刺耳的效果。 有没有办法让动画在滑回之前完成并暂停？

我整个下午都在绞尽脑汁试图解决这个问题 - 任何帮助都会非常感激。

HTML

<div class="box g6">
<div class="item">
    <img src="http://placehold.it/350x150" alt="Demo">
    <div class="info-block">
        <p>
            <strong>Title Here</strong>
        </p>
        <p class="description">
            <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="#">Read more</a>
        <a class="close" href="#">Close</a>
    </div>
  </div>
  </div>

<div class="box g6">
<div class="item">
    <img src="http://placehold.it/350x150" alt="Demo">
    <div class="info-block">
        <p>
            <strong>Title Here</strong>
        </p>
        <p class="description">
            <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="#">Read more</a>
        <a class="close" href="#">Close</a>
    </div>
</div>

jQuery

  $(document).ready( function() {

  $(".info-block").hide();

  $('.box').hover(
  function() {
  $(this).find('.info-block').stop(true,true).slideToggle().show();
  }
  );

  $( ".close" ).click(function() {
  $(this).parent('.info-block').slideUp();
  });
  });

CSS

 .box {
position: relative;
overflow: hidden;
width:350px;

 }

 .info-block {
background: cyan;
position: absolute;
bottom: 0;
padding:10px;
height: 100%;
 }

http://jsfiddle.net/StephenMeehan80/6mxLvbgq/2/

Answer 1

我会这样做:

$('.box').hover(function () {
    $(this).find('.info-block').stop(true).slideDown();
}, function () {
    $(this).find('.info-block').stop(true).slideUp();
}).find(".info-block").hide().find(".close").on('click', function (e) {
    e.preventDefault();
    $(this).closest('.info-block').trigger('mouseleave');
});

<强> DEMO

.stop(true) 停止任何当前动画石头并清除动画队列。

.stop(true, true) 还会将动画发送到其最终状态，这在这里是不自然的。

.slideDown() 和 .slideUp() 避免点击关闭按钮后 .slideToggle() 造成的困惑。

.trigger('mouseleave') 是执行 .stop(true).slideUp() 的简洁方法，无需重复任何代码。