收藏
<!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>滾動(dòng)顯示</button>
<button>滾動(dòng)隱藏</button>
<button>一鍵滾動(dòng)顯示和隱藏</button>
<button>漸顯</button>
<button>漸隱</button>
<button>一鍵漸顯漸隱</button>
<button>自定義動(dòng)畫(huà)</button>
<button>停止</button>
<button>延時(shí)</button>
<div id='dvs'></div>
</body>
<script type="text/javascript">
//show()如果被選元素已被隱藏，則顯示這些元素：
//show(sleep)可設(shè)置時(shí)間，會(huì)延時(shí)慢慢的顯示出來(lái)
//設(shè)置了時(shí)間后有延時(shí)效果，會(huì)慢慢的顯示出來(lái)
//需要節(jié)點(diǎn)被隱藏了才會(huì)執(zhí)行
$('button').eq(0).click(function(){
$('#dvs').show(3000);
})
//hide()
//使目前被顯示的元素節(jié)點(diǎn)，隱藏
//hide(sleep),可設(shè)置時(shí)間，延時(shí)慢慢執(zhí)行
$('button').eq(1).click(function(){
$('#dvs').hide(3000);
})
//slideDown()
//方法通過(guò)使用滑動(dòng)效果，顯示隱藏的被選元素。
//slideDown(sleep),可設(shè)置sleep延時(shí)
$('button').eq(2).click(function(){
$('#dvs').slideDown(3000);
})
//slideup()
//方法通過(guò)使用滑動(dòng)效果，將顯示的元素隱藏起來(lái)
//slideup(sleep),可設(shè)置sleep屬性進(jìn)行延時(shí)
$('button').eq(3).click(function(){
$('#dvs').slideUp(3000);
})
//slideToggle()
//方法用于使用滑動(dòng)效果，滾動(dòng)隱藏后滾動(dòng)顯示出來(lái)
$('button').eq(4).click(function(){
$('#dvs').slideToggle(1800);
})
//fadeIn()
//方法使用淡入效果來(lái)顯示被選元素，假如該元素是隱藏的。
//fadeIn(sleep):漸顯效果
$('button').eq(5).click(function(){
$('#dvs').fadeIn(2000);
})
//fadeOut()
//方法使用淡出效果來(lái)顯示被選元素，假如該元素的顯示的。
//fadeOut(sleep):漸顯效果
$('button').eq(6).click(function(){
$('#dvs').fadeOut(2000)
})
//dadeToggle()
//方法用于淡入顯示之后又淡出顯示
//fadeToggle(sleep);使顯示速度緩慢幾秒
$('button').eq(7).click(function(){
$('#dvs').fadeToggle(2000)
})
//animate()
//方法用于創(chuàng)造一些動(dòng)畫(huà)效果，如移動(dòng)，變大變小，顏色更換等
//格式如下
//$('節(jié)點(diǎn)').animate({
//效果,效果,效果,效果
//},2000)
$('button').eq(8).click(function(){
$('#dvs').animate({
borderRadius:'50%',
marginLeft:'300px',
//原生的JQ對(duì)于顏色兼容并不好
//此處需要調(diào)用一個(gè)color腳本才能執(zhí)行顏色變換
backgroundColor:'red'
},2000)
})
//stop()
//stop() 方法停止當(dāng)前正在運(yùn)行的動(dòng)畫(huà)。
//$.('節(jié)點(diǎn)').stop();
$('button').eq(9).click(function(){
$('#dvs').stop();
})
//delay() 延時(shí)隊(duì)列，X(某事件).delay(插入延時(shí)).Y(另外一個(gè)事件);
//delay() 方法對(duì)隊(duì)列中的下一項(xiàng)的執(zhí)行設(shè)置延遲。
$('button').eq(10).click(function(){
$('#dvs').slideUp(2000).delay(2000).fadeIn(3000);
})
</script>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)