JQ 作业一

**

目标：点击文字，图片滑动与淡出，再点击，图片消失。

**

第一目标：点击，图片淡入，再点，消失。

一、首先用DIV+CSS布局页面，用display: none隐藏图片。
二、两个按钮，用fadeIn()和fadeOut()分别设置淡入和淡出效果。
三、发现还有两个fadeToggle()与fadeTo()可以尝试设置效果。
四、最后采用了fadeToggle()安置在一个按钮上，切换淡入淡出。

总结:

FadeIn()    淡入   $(被选择).fadeIn(速度,回调函数);

FadeOut()    淡出   $ (被选择).fadeIn(速度,回调函数);

FadeToggle()  切换。 $ (被选择).fadeIn(速度,回调函数);

FadeTo()    透明度 值在0-1之间 

$(被选择).fadeTo(速度【必选】,不透明级别 ,回调函数);

第二目标：点击，图片滑动出现，再点，消失。

一、发现可以无需按钮，文字能直接设ID，当做按钮。
二、了解到SlideDown/Up/Toggle相关作用且使用。

总结：

SlideDown()    下滑   $(被选择).fadeIn(速度,回调函数);

SlideUp()      上滑   $(被选择).fadeIn(速度,回调函数);

速度：slow，fast,毫秒。

SlideToggle()      切换   $(被选择).fadeIn(速度,回调函数);

第三目标：点击，图片滑动淡出，再点，消失。

一、先控制图片用淡入/淡出切换，再DIV慢慢滑动，两者结合。

---

作业总结：

一、了解到JQ的淡入淡出，滑下滑上。
二、文字能直接设ID使用，无需按钮。
三、淡出入可以和滑动一起来使用。
四、时间单位都为毫秒。

---