隐藏和显示
hide()和show()
hide()作用:隐藏HTML元素
(相当于CSS中 display:none;)
show()作用:显示HTML元素
(相当于CSS中 display:block;)
语法:
隐藏:$("selector").hide(speed,callback);
显示:$("selector").show(speed,callback);
参数speed:可选值,规定隐藏/显示的速度。可以取值:“slow”,”fast”或毫秒
参数callback:可选值,隐藏或显示完成后所执行的函数名称
例.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
});
});
</script>
<button>隐藏</button>
<p>这是个段落,内容比较少。</p>
<p>这是另外一个小段落</p>
- 1
toggle()
作用:切换hide()和show()方法。显示被隐藏的元素,并隐藏已显示的元素
语法:$(“selector”).toggle(speed,callback);
例.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
<button>隐藏/显示</button>
<p>这是一个文本段落。</p>
<p>这是另外一个文本段落。</p>
- 1
淡入淡出
四种fade方法:
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
fadeIn()方法
作用:淡入已隐藏的元素
语法:$(“selector”).fadeIn(speed,callback);
例.
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
<button>点击淡入 div 元素。</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
- 1
fadeOut()方法
作用:淡出可见元素
语法:$(“selector”).fadeOut(speed,callback);
例.
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
</script>
<button>点击淡出 div 元素。</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>
- 1
fadeToggle()方法
作用:切换fadeIn()和fadeOut()方法
如果元素已淡出,则fadeToggle()会向元素添加淡入效果
如果元素已淡入,则fadeToggle()会向元素添加淡出效果
语法:$(“selector”).fadeToggle(speed,callback);
例.
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
</script>
<button>点击淡入/淡出</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>
- 1
fadeTo()方法
作用:渐变为给定的不透明度(值介于0和1之间)
语法:$(“selector”).fadeTo(speed,opacity,callback);
参数 opacity:将淡入淡出效果设置为给定的不透明度(值介于0和1之间)
例.
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
});
</script>
<button>点我让颜色变淡</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>
- 1
滑动
3种滑动方法:
- slideDown()
- slideUp()
- slideToggle()
slideDown()方法
作用:用于向下滑动元素
语法:$(“selector”).slideDown(speed,callback);
例.
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
</script>
<div id="flip">点我滑下面板</div>
<div id="panel">Hello world!</div>
- 1
slideUp()方法
作用:用于向上滑动元素
语法:$(“selector”).slideUp(speed,callback);
例.
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideUp("slow");
});
});
</script>
<div id="flip">点我滑下面板</div>
<div id="panel">Hello world!</div>
- 1
slideToggle()方法
作用:在slideDown()和slideUp()方法之间切换
语法:$(“selector”).slideToggle(speed,callback);
例.
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<div id="flip">点我滑下面板</div>
<div id="panel">Hello world!</div>
- 1