我想对 div 中的内容进行一些“预览”,因此我将其做得很小,只显示第一行。现在我想对其进行动画处理,当您单击标题时,div 的高度将为 100%,但是当我使用 animate(height:"100%") 时,没有很好的滑动。
<a href="javascript:void(0);" class="show_it">title:</a>
<div>
content<br>
content_hidden
</div>
<script>
$('.show_it').click(function() {
$(this).next("div").animate({
height: 'auto'
}, 1000, function() {
});
});
</script>
<style>
div{
height:20px;
overflow:hidden;
}
</style>
尽管我确信有更好的方法来做到这一点,因为这种方法充其量是草率的,但如果您找不到其他解决方案,您可以随时尝试以下方法:
$('.show_it').click(function() {
// Animate to 100% in 1 millisecond
$(this).parent().next("div").animate({height: 'auto'}, 1);
// Record the height of the div
var newHeight = $(this).parent().next("div").height();
// Animate height to 0% in 1 millisecond
$(this).parent().next("div").animate({height: '0px'}, 1);
// Do the animation using the new fixed height.
$(this).parent().next("div").animate({
height: newHeight,
}, 1000, function() {
});
});
然而,正如我所说,这非常草率 - 如果它符合您的需求,请尝试 jquery slipDown();这是一个更好的方法。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)