Question

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

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

一样

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

来自jQuery UI库的

。（见fiddle）。

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

设置子div的css height属性我得到了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);
     });
 });

但我失去了“滑动抽屉”的样子。有任何想法如何取回它？

Answer 1

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

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的某些部分。

Answer 2

尝试将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);
});

jQuery动画：部分揭示div（就像打开抽屉一样）

2 个答案: