Day7-JQuery的使用(2)[效果篇]

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();
});

当点击“停止”按钮时，中止当前效果。针对于自定义效果。

---