jQuery 动画：部分显示 div（如打开抽屉）答案

【问题标题】：jQuery animation: Partly reveal div (like opening a drawer)jQuery 动画：部分显示 div（如打开抽屉）
【发布时间】：2014-01-15 23:55:02
【问题描述】：

我很乐意使用 jQuery 来显示 () 一个 div 或使其成为 slideDown() 等，但我正在努力实现特定的效果。

在将鼠标悬停在父 div 上时，我正在寻找孩子向下滑动，就像使用

$('.divClass').toggle("slide", { direction: "up" }, 500);

来自 jQuery UI 库。（参见fiddle）。

但是，我希望能够在悬停时仅显示子 div 的一小部分，然后在单击时将其余部分滑动到视图中。

设置子 div 的 css 高度属性我相当混乱地得到了this far (fiddle)...

$('.hoverDiv').hover(
 function () {
     $('.child').animate({
         height: '25px'
     }, 200);
 });

$('.hoverDiv').click(
 function () {
     var cont = $('.child');
     cont.animate({
         height: '0px'
     }, 200, function () {
         cont.css({
             height: 'auto',
             display: 'none'
         });
         cont.slideDown(200);
     });
 });

但我失去了“滑动抽屉”的外观。有什么办法可以找回来吗？

【问题讨论】：

所以应该先显示元素的底部而不是顶部？
看看我的新小提琴。我认为hover 是问题所在，因为当您为另一个元素设置动画时（仍处于悬停状态），该元素会根据悬停前的位置开始。我用了mouseover/mouseleave
更新为mouseenter。事实证明，它是一个更好的选择，因此单击内容或悬停栏都没有关系。

标签： jquery animation show-hide

【解决方案1】：

尝试将您的hover 切换为mouseenter/mouseleave 并稍微调整您的click（我使用scrollHeight 作为高度）：

http://jsfiddle.net/nTn38/4/

这是修改后的 JS：

$('.hoverDiv').mouseenter(function () {
      $(this).find('.content').animate({
          height: '25px'
      }, 200);
}).mouseleave(function () {
      $(this).find('.content').animate({
          height: '0px'
      }, 200);
}).click(function () {
      $(this).find('.content').animate({
          height: $(this).find('.content')[0].scrollHeight
      }, 200);
});

【讨论】：

在这种情况下模糊如何相关？
mouseover/mouseleave 做得很完美，对不起...检查新小提琴
我没想到scrollHeight。我喜欢这种方法 - 不是我想要的效果，但还是学到了一些新东西！
没问题。拍摄很有趣！

【解决方案2】：

如果我理解正确，我认为这样的事情会起作用：

http://jsfiddle.net/Y4heX/3/

<div class="hoverDiv">Hover Me
    <div class="wrapper">
        <div class="content">see a tiny bit of content. Click to see the rest
            <br>sdf
            <br>asdf</div>
    </div>
</div>

$('.hoverDiv').each(function () {
    var $content = $(this).find('.content').show();

    $content.css("margin-top", -1 * $content.height());
}).hover(function () {
    var $content = $(this).find('.content');

    $content.animate({
        "margin-top": -1 * ($content.height() - 25)
    }, 200);
}, function () {
    var $content = $(this).find('.content');

    $content.animate({
        "margin-top": -1 * $content.height()
    }, 100);
});


$('.hoverDiv').click(function () {
    var cont = $(this).find('.content');
    cont.animate({
        "margin-top" : 0
    }, 200);
});

我用overflow: hidden 添加了一个包装器，并使用margin-top 隐藏了包装器上方的部分div。

【讨论】：

是的，这就是我要找的。谢谢！