jQuery 动画 : Partly reveal div (like opening a drawer)

Question

我很舒服地使用 jQuery 来 show() div 或使其 slipDown() 等，但我正在努力实现特定的效果。

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

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

来自 jQuery UI 库。 (参见fiddle)。

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

设置子 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

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