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

时间:2021-09-03 04:46:10

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