Front-end basis -jQuery animation

Chapter 9 jQuery animations

• jQuery offers three basic movies, the movies are standard, regular effect, jQuery also provides custom animation function.
• Animation effects [08- demo jQuery animations (animate) .html]

9.1 three basic animation

• Display (show) and hidden (hide) and switch (toggle) is a set of animation:
• Slide (slideUp) and out at (slideDown) switching (slideToggle), similar effects as shutter doors
• Fade (fadeIn) and fade (. FadeOut) switching (fadeToggle)

$obj.show([speed], [callback]);
// speed(可选)：动画的执行时间
	 // 1.如果不传，就没有动画效果。如果是slide和fade系列，会默认为normal
	 // 2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
     // 3.固定速度字符串，slow(200)、normal(400)、fast(600)，如果传其他字符串，则默认为normal。
// callback(可选):执行完动画后执行的回调函数

slideDown()/slideUp()/slideToggle();同理
fadeIn()/fadeOut();fadeToggle();同理

9.2 Custom Animation

• animate: Custom Animation

$(selector).animate({params},[speed],[easing],[callback]);
// {params}：要执行动画的CSS属性，带数字（必选）
// speed：执行动画时长（可选）
// easing:执行效果，默认为swing（缓动）  可以是linear（匀速）
// callback：动画执行完后立即执行的回调函数（可选）

9.3 animation and stop animation queue

• Execute multiple animations on the same element, then for the animation, the animation will be put back in the queue animation, animation, etc. in front of the execution will be completed execution (Lenovo: a train stop).

// stop方法：停止动画效果
stop(clearQueue, jumpToEnd);
// 第一个参数：是否清除队列
// 第二个参数：是否跳转到最终效果