jQuery ??
jQuery ?? - ??? ? ??
???, ??, ??, ????, ??? ? ????? ??
jQuery hide() ? show()
jQuery??? hide() ? show() ???? ??? ? ????. HTML ?? ??? ? ??
??:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
???? speed ????? ???/?? ??? ?????. , "??", "??" ?? ??? ?? ??? ? ????.
??? ?? ????? ??? ?? ??? ??? ? ??? ??? ?????.
jQuery ??()
jQuery??? ??() ???? ???? hide() ? show() ???? ??? ? ????.
??? ??? ???? ??? ??? ????.
??:
$(selector).toggle(speed,callback);
???? ?? ????? ???/?? ??? ???? "??", "??" ?? ??? ?? ??? ? ????.
???? ?? ????? ??() ???? ??? ? ??? ??? ?????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".hot").toggle();
});
});
</script>
</head>
<body>
<button>隱藏/顯示</button>
<div class="hot">
<img src="http://www.pp3.cn/uploads/201510/2015102409.jpg" height="300px" width="200px">
<p>這是一張圖片</p>
</div>
</body>
</html>Fade
jQuery ??? ??
jQuery? ???? ??? ??? ??? ?? ? ????.
jQuery?? ?? ? ?? ??? ???? ????.
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
jQuery fadeIn() ???
jQuery fadeIn()? ??? ?? ?????. ??? ??.
??:
$(selector).fadeIn(speed,callback);
???? ?? ????? ??? ?? ??? ?????. "??", "??" ?? ??? ?? ??? ? ????. .
???? ?? ????? ???? ??? ? ??? ??? ?????.
jQuery fadeOut() ???
jQuery fadeOut() ???? ??? ??? ??? ???? ? ?????.
??:
$(selector).fadeOut(speed,callback);
???? ?? ????? ??? ?? ??? ?????. "??", "??" ?? ??? ?? ??? ? ????.
???? ?? ????? ???? ??? ? ??? ??? ?????.
jQuery fadeToggle() ???
jQuery fadeToggle() ???? fadeIn()? fadeOut() ??? ??? ??? ? ????.
fadeToggle()? ?? ??? ??? ??? ??? ? ??? ?????.
fadeToggle()? ?? ??? ?? ??? ??? ?? ??? ?????.
??:
$(selector).fadeToggle(speed,callback);
???? ?? ????? ??? ?? ??? ?????. "??", "??" ?? ??? ?? ??? ? ????.
???? ?? ????? ???? ??? ? ??? ??? ?????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>實(shí)例演示了 fadeToggle() 使用了不同的 speed(速度) 參數(shù)。</p>
<button>點(diǎn)擊淡入/淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>jQuery fadeTo() ???
jQuery fadeTo() ???? ??? ????(0?? 1 ??? ?)? ?? ?????? ?????.
??:
$(selector).fadeTo(speed,opacity,callback);
?? ?? ????? ??? ?? ??? ?????. "??", "??" ?? ??? ?? ??? ? ????.
fadeTo() ???? ?? ???? ????? ??? ??? ??? ????(0?? 1 ??? ?)? ?????.
??? ?? ????? ??? ??? ? ??? ??? ?????.
Sliding
jQuery ???? ??
jQuery? ???? ??? ???? ??? ?? ? ????.
jQuery?? ??? ?? ???? ???? ????.
slideDown()
slideUp()
slideToggle()
jQuery SlideDown() ???
jQuery SlideDown() ???? ??? ??? ?????? ? ?????.
??:
$(selector).slideDown(speed,callback);
???? ?? ????? ??? ?? ??? ?????. "??", "??" ?? ??? ?? ??? ? ????.
??? ?? ????? ????? ??? ? ??? ??? ?????.
jQuery SlideUp() ???
jQuery SlideUp() ???? ??? ?? ?????? ? ?????.
??:
$(selector).slideUp(speed,callback);
???? ?? ????? ??? ?? ??? ?????. "??", "??" ?? ??? ?? ??? ? ????.
??? ?? ????? ????? ??? ? ??? ??? ?????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideUp("slow");
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
}
</style>
</head>
<body>
<div id="flip">點(diǎn)我拉起面板</div>
<div id="panel">Hello world!</div>
</body>
</html>jQuery SlideToggle() ???
jQuery SlideToggle() ???? SlideDown()? SlideUp() ??? ??? ??? ? ????.
??? ??? ?????? SlideToggle()? ??? ?? ???????.
??? ?? ?????? SlideToggle()? ??? ??? ???????.
$(selector).slideToggle(speed,callback);
???? ?? ????? ??? ?? ??? ?????. "??", "??" ?? ??? ?? ??? ? ????.
??? ?? ????? ????? ??? ? ??? ??? ?????.
Animation
jQuery ????? - animate() ???
jQuery animate() ???? ??? ?? ?????? ??? ? ?????.
??: ??
$(selector).animate({params},speed,callback);?? params ????? ?????? ???? CSS ??? ?????.
???? ?? ????? ??? ?? ??? ?????. "??", "??" ?? ??? ?? ??? ? ????.
??? ?? ????? ?????? ??? ? ??? ??? ?????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
</script>
</head>
<body>
<button>開始動畫</button>
<p>默認(rèn)情況下，所有的 HTML 元素有一個(gè)靜態(tài)的位置，且是不可移動的。
如果需要改變?yōu)?，我們需要將元素?nbsp;position 屬性設(shè)置為 relative, fixed, 或 absolute!</p>
<div style="background:yellow;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>jQuery ????? ??
jQuery stop() ???
jQuery stop() ???? ??????? ??? ???? ?? ???? ? ?????.
stop() ???? ????, ??? ? ??? ?? ?????? ??? ?? jQuery ?? ??? ?? ?????.
??:
$(selector).stop(stopAll,goToEnd);
???? stopAll ????? ????? ???? ??? ??? ??? ?????. ???? false?? ?? ?????? ???? ?? ?? ?????? ?? ????? ?????.
???? goToEnd ????? ?? ?????? ?? ???? ??? ?????. ???? ?????.
??? ????? stop()? ??? ??? ??? ?? ?????? ????.
?? ???? ???? ?? stop() ???? ?????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<button id="stop">停止滑動</button>
<div id="flip">點(diǎn)我向下滑動面板</div>
<div id="panel">Hello world!</div>
</body>
</html>
