$("#content").animate({ bottom: "-100px" });

解决方案 »

  1.   

    改变宽高的动画,不太容易弄出你要的那种效果。不过可以用定位或者其他样式结合来实现一下:<style>
    #content,#slidetoggle{
        background-color:#B7CA9F;
        border:1px solid #D7D7D7;
        margin:0px;
        padding:7px;
        text-align:center;
    }
    #box{
    position: absolute;
    }
    #content{
        height:100px;
        margin-top:0px;
        overflow: hidden;
        
    }
    </style>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#slidetoggle").click(function () {
                $("#content").animate({
                 height:0
                });
                $('#box').animate({
                 top:$("#content").height()
                })
            })
        })
    </script>
    <title>Jquery SlideToggle</title>
    </head><body>
    <div id="box">
    <p id="slidetoggle">请点击这里</p>
    <div id="content">
    <p>This Test。</p>
    <p>....</p>
    </div>
    </div>
    </body>
      

  2.   

    我也做了一个,你可以试试,样式方面还需要再调整<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <style>
    #content,#slidetoggle{
        background-color:#B7CA9F;
        border:1px solid #D7D7D7;
        margin:0px;
        padding:7px;
        text-align:center;
    }
    #content{
        height:100px;
        bottom:50%;
    width:100%;
        position:absolute;
    }
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        var count=0;
        $(document).ready(function () {
            $("#slidetoggle").click(function () {
        if(count==0){
    $("#content").animate({height:0});
    $("#hideshow").hide();
    count=1;
    }
    else{
    $("#content").animate({height:100});
        $("#hideshow").show();
    count=0;
    }
            });
        });
    </script>
    <title>Jquery SlideToggle</title>
    </head><body>
    <br />
    <br /><br /><br /><br /><br /><br />
    <p id="slidetoggle">请点击这里</p>
    <div id="content">
    <div  id="hideshow">
    <p>This Test。</p>
    <p>....</p>
    </div>
    </div></body>
    </html>