jQuery動畫：部分顯示div（如打開抽屜）

我很喜歡使用jQuery來顯示（）div或使其滑動（）等，但我努力實現特定的效果。jQuery動畫：部分顯示div（如打開抽屜）

在懸停我在尋找孩子父母的div就像使用

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

從jQuery UI的圖書館滑下。（請參閱fiddle）。

但是，我希望能夠只顯示懸停的子div的一小部分，然後將其餘部分滑動到單擊視圖上。

設置孩子的div我已經相當亂七八糟了this far (fiddle)的CSS height屬性...

$('.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); 
    }); 
});

但我已經失去了「滑動抽屜」的樣子。任何想法如何恢復？

來源

2014-01-15 Pete

所以元素的底部應該首先顯示而不是頂部？ –

看到我新的小提琴。我認爲'懸停'是問題所在，因爲當您爲另一個元素設置動畫時（仍處於懸停狀態時），元素將根據懸停前的位置啓動。我使用了'mouseover/mouseleave' – prograhammer

更新到'mouseenter'。它被證明是更好的選擇，所以點擊內容或懸停欄並不重要。 – prograhammer

如果我理解正確的話，我覺得這樣的事情會工作：

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上面的包裝。

來源

2014-01-16 00:21:52

是的，這就是我一直在尋找的。謝謝！ – Pete

嘗試切換您的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); 
});

來源

2014-01-16 00:38:37 prograhammer

在這種情況下，模糊相關性如何？ –

'mouseover/mouseleave'使它完美，對不起...檢查新的小提琴 – prograhammer

我沒有想過scrollHeight。我喜歡這種方法 - 不是我想要的效果，而是學到了一些新的東西！ – Pete

jQuery動畫：部分顯示div（如打開抽屜）

回答

相關問題