收藏
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
#dvs{
width: 300px;
height: 300px;
background: blue;
display: none;
}
</style>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>滚动显示</button>
<button>滚动隐藏</button>
<button>一键滚动显示和隐藏</button>
<button>渐显</button>
<button>渐隐</button>
<button>一键渐显渐隐</button>
<button>自定义动画</button>
<button>停止</button>
<button>延时</button>
<div id='dvs'></div>
</body>
<script type="text/javascript">
//show()如果被选元素已被隐藏，则显示这些元素：
//show(sleep)可设置时间，会延时慢慢的显示出来
//设置了时间后有延时效果，会慢慢的显示出来
//需要节点被隐藏了才会执行
$('button').eq(0).click(function(){
$('#dvs').show(3000);
})
//hide()
//使目前被显示的元素节点，隐藏
//hide(sleep),可设置时间，延时慢慢执行
$('button').eq(1).click(function(){
$('#dvs').hide(3000);
})
//slideDown()
//方法通过使用滑动效果，显示隐藏的被选元素。
//slideDown(sleep),可设置sleep延时
$('button').eq(2).click(function(){
$('#dvs').slideDown(3000);
})
//slideup()
//方法通过使用滑动效果，将显示的元素隐藏起来
//slideup(sleep),可设置sleep属性进行延时
$('button').eq(3).click(function(){
$('#dvs').slideUp(3000);
})
//slideToggle()
//方法用于使用滑动效果，滚动隐藏后滚动显示出来
$('button').eq(4).click(function(){
$('#dvs').slideToggle(1800);
})
//fadeIn()
//方法使用淡入效果来显示被选元素，假如该元素是隐藏的。
//fadeIn(sleep):渐显效果
$('button').eq(5).click(function(){
$('#dvs').fadeIn(2000);
})
//fadeOut()
//方法使用淡出效果来显示被选元素，假如该元素的显示的。
//fadeOut(sleep):渐显效果
$('button').eq(6).click(function(){
$('#dvs').fadeOut(2000)
})
//dadeToggle()
//方法用于淡入显示之后又淡出显示
//fadeToggle(sleep);使显示速度缓慢几秒
$('button').eq(7).click(function(){
$('#dvs').fadeToggle(2000)
})
//animate()
//方法用于创造一些动画效果，如移动，变大变小，颜色更换等
//格式如下
//$('节点').animate({
//效果,效果,效果,效果
//},2000)
$('button').eq(8).click(function(){
$('#dvs').animate({
borderRadius:'50%',
marginLeft:'300px',
//原生的JQ对于颜色兼容并不好
//此处需要调用一个color脚本才能执行颜色变换
backgroundColor:'red'
},2000)
})
//stop()
//stop() 方法停止当前正在运行的动画。
//$.('节点').stop();
$('button').eq(9).click(function(){
$('#dvs').stop();
})
//delay() 延时队列，X(某事件).delay(插入延时).Y(另外一个事件);
//delay() 方法对队列中的下一项的执行设置延迟。
$('button').eq(10).click(function(){
$('#dvs').slideUp(2000).delay(2000).fadeIn(3000);
})
</script>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
