jquery - 使用 Jquery 的上滑 div

Question

我有一个 250px 高和 160px 宽的 div。加载页面时，除 30px 外，div 将隐藏在内容后面。我想知道如何使 div 可点击，以便它会向上滑动以显示整个 div。提前致谢。

        <script type="text/javascript">
            $('#maininfo').click(function() {
                $('.maininfo_tab').slideUp('slow', function() {
                // Animation complete.
             });
           });
</script>
    <div id="maininfo">
        <div class="maininfo_tab" style="position:relative;margin-bottom:35px;">

Answer 1

您可以使用 animate 方法来滑动它，并使用 click 事件来连接它：

var nextHeight = 250;
$("#myDiv").click(function() {
    $(this).animate({
        height: nextHeight
    });
    nextHeight = Math.abs(nextHeight - 280);
});​

小提琴示例：http: //jsfiddle.net/johnkoer/qu5bz/8/