Day7-JQuery的使用(2)[效果篇]
以下方代码演示
<div style="width:200px;
height:200px;
background-color:red;">
</div>
缩放式效果
1.show()
以缩放的方式显示隐藏的匹配元素。
$("div").show(2000);
在两秒后显示隐藏的标签为div的元素。
show的完整参数<<
show([speed速度],[easing效果],[function函数])
注:easing的像个参数:
“swing” - 在开头/结尾移动慢,在中间移动快
“linear” - 匀速移动
2.hide()
以缩放的方式隐藏显示的匹配元素。
$("div").hide(2000);
在两秒后显示隐藏的标签为div的元素。
3.toggle()
当元素为显示状态时,隐藏该元素;当元素为隐藏状态时,显示该元素。
$("div").toggle(2000);
在两秒内显示或隐藏标签为div的元素。
伸缩式效果
1.slideDown()
以伸缩的方式显示隐藏的匹配元素。
$("div").slideDown(2000);
在两秒后显示隐藏的标签为div的元素。
2.slideUp()
以伸缩的方式隐藏显示的匹配元素。
$("div").slideUp(2000);
在两秒后显示隐藏的标签为div的元素。
3.slideToggle()
当元素为显示状态时,隐藏该元素;当元素为隐藏状态时,显示该元素。
$("div").slideToggle(2000);
在两秒内显示或隐藏标签为div的元素。
淡入式效果
1.fadeIn()
以淡入的方式显示隐藏的匹配元素。
$("div").fadeIn(2000);
在两秒后显示隐藏的标签为div的元素。
2.fadeOut()
以淡出的方式隐藏显示的匹配元素。
$("div").fadeOut(2000);
在两秒后显示隐藏的标签为div的元素。
3.fadeToggle()
当元素为显示状态时,隐藏该元素;当元素为隐藏状态时,显示该元素。
$("div").fadeToggle(2000);
在两秒内显示或隐藏标签为div的元素。
改变透明度效果
fadeTo
改变图片透明度。
$("div").fadeTo(2000,0.6);
2秒后,将标签为div的元素的透明度变为0.6
fadeTo的详细参数
fadeTo([[speed],opacity,[easing],[fn]]);
opactity:指元素的透明度。在0-1之间
自定义效果
animate
根据自己定义的方法来改变元素的效果。
$("div").animate({width:"100px",height:"100px"},2000);
2秒后,将标签为div的元素的宽和高变为100像素。
停止效果
stop
中止当前效果。
<input type="button" name = "stop" value="停止" />
$("input[name='stop']").click(function(){
$("div").stop();
});
当点击“停止”按钮时,中止当前效果。针对于自定义效果。