Question

我知道如何使用slideDown()来显示之前隐藏的元素。

但是我怎么能为单个元素做到这一点？也就是说，不是切换隐藏元素，而是增加流体高度元素的可见窗口？

这是一些HTML标记：

<div class="mydiv">
    <img src="http://placehold.it/200x400&text=long+img">
</div>
<button class="btn">View More</button>

和CSS：

.mydiv {
    height: 100px;
    min-height: 100px;
    overflow: hidden;
}

和JS：

$('.btn').on('click', function(e){
    e.preventDefault();
    $('.mydiv').slideDown();
});

注意，我知道我的例子有一个固定的高度，但假设图像可以是任何高度。但无论高度如何，只有单击“查看更多”才会显示前100px。

更新

如果可能的话，我宁愿保留滑动式动画。

Answer 1

尝试

$('.btn').on('click', function (e) {
    e.preventDefault();
    var $div = $('.mydiv')
    $div.animate({
        'height': $div.prop('scrollHeight')
    });
});

演示：Fiddle

Answer 2

fiddle Demo

var mydiv = $('.mydiv');
$('.btn').on('click', function (e) {
    e.preventDefault();
    mydiv.animate({
        height: mydiv.find('img').height()
    }, 1000);
});

Answer 3

如果您希望它上下滑动但不能完全隐藏，则需要使用animate()

http://jsfiddle.net/PzA5D/2/

$('.btn').on('click', function(e){
    e.preventDefault();
    if($('.mydiv').height() < "210") {
        $('.mydiv').animate({height: $('.mydiv .wrapper').height() + 'px'}, 1000);
    } else {
        $('.mydiv').animate({height: '205px'}, 1000);
    }
});

编辑：包含.wrapper div，因此内部可能有任何内容，而不仅仅是图片，动画仍然可以使用。

如何显示元素的一部分，并在点击时切换到所有元素？

3 个答案: