JQuery 向下展开收起动画( slideDown(),slideUp() )

来源:互联网 发布:数据农场采集器 编辑:程序博客网 时间:2024/05/17 23:15

$('#div1').slideDown(1000);  //向下展开,下拉。1000毫秒,表示动画展开过程时间。
$('#div1').slideUp(1000);  //向上收起
$('#div1').slideToggle(1000);  //合成展开收起

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title>下拉收起动画</title><style>#div1 {width:100px; height:100px;background-color:black;}</style>    <script src="scripts/jquery-1.7.1.min.js"></script>    <script>        $(function() {//下拉按钮            $('#btnSlideDown').click(function(){//$('#div1').slideDown();$('#div1').slideDown(1000);  //1000毫秒,表示动画下拉过程时间。});//收起按钮$('#btnSlideUp').click(function(){//$('#div1').slideUp();$('#div1').slideUp(1000);});//合成按钮$('#btnTotal').click(function(){//$('#div1').slideToggle();$('#div1').slideToggle(1000);});        });    </script></head><body>    <input type="button" id="btnSlideDown" value="下拉"/>    <input type="button" id="btnSlideUp" value="收起"/><input type="button" id="btnTotal" value="合成"/><div id="div1"></div></body></html>



阅读全文
0 0
原创粉丝点击