[学习笔记]jQuery实现一些动画效果的方法

jQuery实现效果的方法

1，隐藏和显示：hide()，show()，toggle()  // [ˈtɑ:gl]切换

语法：

$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);//两个参数可选

speed规定隐藏/显示的速度，取值”slow”,”fast”或者毫秒//slow和fast必须加引号

callback是方法完成后所执行的函数名称。

2，淡入淡出/fade：fadeIn(),fadeOut(),fadeToggle(),fadeTo()

语法：

$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback); //两个参数可选

特殊地，$(selector).fadeTo(speed,opacity,callback)方法 给渐变设置不透明度，

其中speed取值”fsat”,”slow”或毫秒；

       opacity不透明度取值0~1为必选项。

3，滑动效果/slide：slideUp(),slideDown(),slideToggle()

语法：

$(selector).slideUp(speed,callback);
$(selector).slideDown(speed,callback);
$(selector).slideToggle(speed,callback); //两个参数可选

4，动画：animate()

语法：

$(selector).animate({ CSS属性:"值"，  //属性之间用逗号隔开不是用分号！
                      CSS属性:"值" },speed,callback)；

a. 对元素位置进行操作，必须先把元素的position设置为absolute，relative或者fixed;

b. 多个CSS属性写在一条语句里，元素的多个属性动画是同时进行的；若要逐步执行，用到队列功能，即每个属性都单独写一条语句，逐个执行即可。

5，停止动画：stop()

语法：

$(selector).stop(stopAll,goToEnd); //其中stop的两个参数均为可选的，值类型均为布尔值；

stopAll即停止所有队列动画，默认值为false，即仅停止当前动画，对后续动画队列无影响；改为true，即停止所有动画。

goToEnd即是否立刻完成当前动画，默认值为false，即执行stop()语句的瞬间动画会终止（若动画进行了一半，则在一半的状态下停止）；改为true，即立刻完成当前动画。

6，callback函数用法：

举个不使用callback函数的例子，

$("p").hide(1000);
alert("The P is hidden now");

运行结果：在p元素未隐藏完时，就弹出了弹窗。//显然不是我们想要的结果。

使用callback的情况：

$("p").hide(1000,function(){
                 alert("The P is hidden now")
                            });

结果隐藏动画执行完毕后，弹出了弹窗。

结论：要在一个涉及动画的函数之后来执行语句，需要使用callback函数。

7，Chaining(链接)技术：

允许在一个元素对象上运行多个jQuery命令，一条接一条地执行。

//好处，这样的话，浏览器就不必多次查找相同的元素了。

例如：

$("p").css("color","red").slideUp("slow").slideDown(2000);