Question

我已经设法凑齐了一个非常好的jQuery'悬停在图像上以显示叠加'但是有一些小问题我希望有更好的jQuery可能能够提供帮助。

底部有一个链接到JSFiddle

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

我也希望这也适用于移动设备。通过在移动设备上进行测试，悬停可以正常工作，但叠加层仍然可见，这就是我添加关闭按钮的原因。

两个问题：

关闭按钮使用slideDown隐藏叠加层，这会使slideToggle混乱。 还有另一种方法可以隐藏叠加层吗？我正在使用.hide隐藏页面加载时的叠加层。
我已经使用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

这对我有用。基本上我将它从悬停更改为mouseenter和mouseleave，因为单击关闭按钮后，状态更依赖于鼠标的位置。

$(document).ready( function() {


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

$('.box').mouseenter(
  function() {
      if ($(this).find('.info-block').is(":hidden"))
        $(this).find('.info-block').stop(true,true).slideToggle().show();
  }
  );

    $('.box').mouseleave(
  function() {
      if (!$(this).find('.info-block').is(":hidden"))
        $(this).find('.info-block').stop(true,true).slideToggle();
  }
  );


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


});

Answer 2

我认为使用CSS可以获得更好的动画效果（与stop()比较）。虽然我不确定如何单独使用CSS关闭按钮。但是JQuery非常擅长操作类。我会将其转换为使用基于CSS类的方法。此外，您应该在悬停功能中明确使用addClass/removeClass，特别是如果可以在其他地方切换状态。

JS

$('.box').hover(
  function() {
      $(this).find('.info-block').addClass("on");
  },
function() {
      $(this).find('.info-block').removeClass("on");
  });

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

CSS

.info-block {
    background: cyan;
    position: absolute;
    height: 0;
    bottom:0;
    transition:all .5s ease-in;
}
.info-block.on {
    height:100%;
    padding:10px;
}

http://jsfiddle.net/6mxLvbgq/5/

如果你真的想坚持使用jQuery动画，你应该考虑使用if ($el.is(':animated')) return;而不是stop()。这将使动画完成而不排队另一个。

Answer 3

我会这样做：

$('.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()方式，无需重复任何代码。

悬停以显示叠加 - 几乎在那里，只需要一些调整

3 个答案: