jQuery中的slideUp()、slideDown()、hide()、show()
生活随笔
收集整理的這篇文章主要介紹了
jQuery中的slideUp()、slideDown()、hide()、show()
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
slideUp(speed,[callback])
通過高度變化（向上減小）來動(dòng)態(tài)地隱藏所有匹配的元素，在隱藏完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。 這個(gè)動(dòng)畫效果只調(diào)整元素的高度，可以使匹配的元素以“滑動(dòng)”的方式隱藏起來。slideDown(speed,[callback])
通過高度變化（向下增大）來動(dòng)態(tài)地顯示所有匹配的元素，在顯示完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。 這個(gè)動(dòng)畫效果只調(diào)整元素的高度，可以使匹配的元素以“滑動(dòng)”的方式顯示出來?
hide()
隱藏顯示的元素 這個(gè)就是 'hide( speed, [callback] )' 的無動(dòng)畫版。如果選擇的元素是隱藏的，這個(gè)方法將不會(huì)改變?nèi)魏螙|西。?
show()
顯示隱藏的匹配元素。 這個(gè)就是 'show( speed, [callback] )' 無動(dòng)畫的版本。如果選擇的元素是可見的，這個(gè)方法將不會(huì)改變?nèi)魏螙|西。無論這個(gè)元素是通過hide()方法隱藏的還是在CSS里設(shè)置了display:none;，這個(gè)方法都將有效。? <head>
<title>slideUp()和slideDown()</title>
<style type="text/css">
<!--
body{
?background:url(bg.jpg);
}
img{
?border:1px solid #000000;
?margin:8px;
}
input{
?border:1px solid #000000;
?font-size:13px; padding:2px;
?font-family:Arial, Helvetica, sans-serif;
?background-color:#FFFFFF;
?color:#000000;
}
div{
?background-color:#FFFF00;
?height:80px; width:80px;
?border:1px solid #000000;
?float:left; margin-top:8px;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
?$("input:eq(0)").click(function(){
??$("div").add("img").slideUp(1000);
?});
?$("input:eq(1)").click(function(){
??$("div").add("img").slideDown(1000);
?});
?$("input:eq(2)").click(function(){
??$("div").add("img").hide(1000);
?});
?$("input:eq(3)").click(function(){
??$("div").add("img").show(1000);
?});
});
</script>
</head>
<body>
?<input type="button" value="SlideUp">
?<input type="button" value="SlideDown">
?<input type="button" value="Hide">
?<input type="button" value="Show"><br>
?<div></div><img src="test.jpg">
</body>
總結(jié)
以上是生活随笔為你收集整理的jQuery中的slideUp()、slideDown()、hide()、show()的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Eclipse 代码提示功能设置
- 下一篇： js定时器