hide()和show()方法

$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的speed参数规定隐藏/显示的速度
可以取以下值："slow"、"fast" 或毫秒
可选的callback参数是隐藏或显示完成后所执行的函数名称

toggle()方法

切换 hide()和 show()方法
$(selector).toggle(speed,callback);
可选的speed参数规定隐藏/显示的速度
可以取以下值："slow"、"fast" 或毫秒
可选的callback参数是隐藏或显示完成后所执行的函数名称

淡入淡出

Fading方法

fadeIn()
fadeOut()
fadeToggle()
fadeTo()

fadeIn()方法

用于淡入已隐藏的元素
$(selector).fadeIn(speed,callback);
可选的speed参数规定效果的时长
可以取："slow"、"fast" 或毫秒
可选的callback参数是fading完成后所执行的函数名称

fadeOut()方法

用于淡出可见元素。
$(selector).fadeOut(speed,callback);
可选的speed参数规定效果的时长
可以取："slow"、"fast" 或毫秒
可选的callback参数是fading完成后所执行的函数名称

fadeToggle()方法

可以在 fadeIn()与 fadeOut()方法之间进行切换
如果元素已淡出，则 fadeToggle()会向元素添加淡入效果
如果元素已淡入，则 fadeToggle()会向元素添加淡出效果
$(selector).fadeToggle(speed,callback);
可选的speed参数规定效果的时长
可以取："slow"、"fast" 或毫秒
可选的callback参数是fading完成后所执行的函数名称

fadeTo()方法

允许渐变为给定的不透明度（值介于0与1之间）
$(selector).fadeTo(speed,opacity,callback);
必需的speed参数规定效果的时长
可以取："slow"、"fast" 或毫秒
fadeTo()方法中必需的opacity参数将淡入淡出效果
设置为给定的不透明度（值介于0与1之间）
可选的callback参数是该函数完成后所执行的函数名称

滑动

jQuery滑动方法

slideDown()
slideUp()
slideToggle()

slideDown()方法

用于向下滑动元素
$(selector).slideDown(speed,callback);
可选的speed参数规定效果的时长
可以取："slow"、"fast" 或毫秒
可选的callback参数是滑动完成后所执行的函数名称

slideUp()方法

用于向上滑动元素。
$(selector).slideUp(speed,callback);
可选的speed参数规定效果的时长
可以取："slow"、"fast" 或毫秒
可选的callback参数是滑动完成后所执行的函数名称

slideToggle()方法

可以在 slideDown()与 slideUp()方法之间进行切换
如果元素向下滑动，则 slideToggle()可向上滑动它们
如果元素向上滑动，则 slideToggle()可向下滑动它们
$(selector).slideToggle(speed,callback);
可选的speed参数规定效果的时长
可以取："slow"、"fast" 或毫秒
可选的callback参数是滑动完成后所执行的函数名称

动画

animate()方法

用于创建自定义动画
$(selector).animate({params},speed,callback);
必需的params参数定义形成动画的CSS属性
可选的speed参数规定效果的时长
可以取："slow"、"fast" 或毫秒
可选的callback参数是动画完成后所执行的函数名称
默认情况下，所有HTML元素都有一个静态位置，且无法移动
如需对位置进行操作，记得首先把元素的CSS position属性设置为
relative、fixed 或 absolute

animate()操作多个属性

生成动画的过程中可同时使用多个属性

animate()使用相对值

可以定义相对值（该值相对于元素的当前值）
需要在值的前面加上+=或-=

animate()使用预定义的值

可以把属性的动画值设置为 
"show" "hide"或"toggle"

animate()使用队列功能

默认地，jQuery提供针对动画的队列功能
这意味着如果在彼此之后编写多个 animate()调用
jQuery会创建包含这些方法调用的"内部"队列
然后逐一运行这些animate调用

停止动画

stop()方法

用于停止动画或效果，在它们完成之前。
top()方法适用于所有jQuery效果函数
包括滑动、淡入淡出和自定义动画
$(selector).stop(stopAll,goToEnd);
可选的stopAll参数规定是否应该清除动画队列
默认是false，即仅停止活动的动画，允许任何排入队列的动画向后执行
可选的goToEnd参数规定是否立即完成当前动画，默认是false
因此默认地 stop()会清除在被选元素上指定的当前动画

Callback()方法

Callback()函数在当前动画100%完成之后执行

jQuery链(Chaining)

通过jQuery，可以把动作/方法链接在一起
Chaining允许我们在一条语句中运行多个jQuery方法（在相同的元素上）

jQuery 方法链接

链接(chaining)的技术
允许在相同的元素上运行多条jQuery命令，一条接着另一条
这样的话，浏览器就不必多次查找相同的元素
如需链接一个动作，只需简单地把该动作追加到之前的动作上

jQuery效果的简单方法

淡入淡出

滑动

动画

停止动画

猜你喜欢