jQuery入门基础（动画效果）

一、隐藏显示

1、show（）--显示隐藏的被选择元素

例：$(selector).show(speed,callback);

 

2、hide()--隐藏被选元素的内容

例：$(selector).hide(speed,callback);

speed:规定元素隐藏、完全可见的速度。默认为 "0"。

可能的值：

• 毫秒 （比如 1500）
• "slow"
• "normal"
• "fast"

callback:show 函数执行完之后，要执行的函数。

二、上下滑动

1、slideup()--滑动上升

例：$(selector).slideUp(speed,callback)

2、slideDown()--滑动下降

例：$(selector).slideDown(speed,callback)

三、淡入淡出

1、fadeIn()--淡入元素

$(selector).fadeIn(speed,callback);

2、fadeOut()--淡出元素

$(selector).fadeOut(speed,callback)

四、自定义动画

animate()-- 执行 CSS 属性集的自定义动画

$(选择器).animate({params},speed,function(){回调函数});

扩展：

（1）$(selector).animate(styles,speed,easing,callback)

规定在不同的动画点中设置动画速度的 easing 函数。

内置的 easing 函数：

• swing
• linear

（2）$(selector).animate(styles,options)

规定动画的额外选项。

可能的值：

• speed - 设置动画的速度
• easing - 规定要使用的 easing 函数
• callback - 规定动画完成之后要执行的函数
• step - 规定动画的每一步完成之后要执行的函数
• queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始
• specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数

（3)动画停止

stop（）--停止动画

$(selector).stop(stopAll,goToEnd)

stopAll--规定是否停止被选元素的所有加入队列的动画。

goToEnd--规定是否允许完成当前的动画。