您的位置：首页 > Web前端 > JQuery

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

2017-12-19 14:49 621 查看

$('#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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery

相关文章推荐

新的分享

章节导航