第一章、基本效果
显示/隐藏 show()和hide()
-
show()- 显示。元素的开始状态display:none，终点：display:block; -
hide()- 隐藏。元素的开始状态display:block，终点：display:none; -
toggle()- 可以使用 toggle() 方法来切换 hide() 和 show() 。
以上三个单词（）里不写参数表示干嘣效果。
语法公式：
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback); // speed = 时间（速度） 、 callback = 回调函数
1、speed 参数规定隐藏/显示的速度、时间，可以取毫秒，默认为 "0"时表示干嘣效果。
2、callback 参数是，等hide，show，toggle动画完成后，所执行的函数名称。
$(document).on('click', function() {
$('#box').toggle(3000, Name) // 动画时间为3秒、3秒后执行Name函数里的内容
})
function Name() { // 可将俩个函数写在一起
alert('ok')
}
第二章、淡入淡出
淡入fadeIn() 和 淡出fadeOut()
-
fadeIn()- 用于淡入已隐藏的元素。 -
fadeOut()- 方法用于淡出可见元素。 -
fadeToggle()- 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。 -
fadeTo()- 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
语法公式：
$(selector).fadeIn(speed,callback); // speed = 时间 、 callback = 回调函数
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback); // opacity = 透明度
1、speed 参数规定隐藏/显示的速度、时间，可以取毫秒，默认为 "0"。表示干嘣效果。
2、callback 参数是fadeIn，fadeOut，fadeToggle等方法完成后所执行的函数名称。
3、fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
$("#btn1").click(function(){
$("#box").fadeIn();
});
$("#btn2").click(function(){
$("#box").fadeOut();
});
$("#btn3").click(function(){
$("#box").fadeToggle(1000);
});
$("#btn4").click(function(){
$("#box").fadeTo(2000,0.6); // 用2秒的时间，从1渐变到0.6
});
第三章、上下滑动
下拉 slideDown() 和 合上 slideUp()
-
slideDown()- 用于向下滑动元素。 -
slideUp()- 用于向上滑动元素。 -
slideToggle()- 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。
语法公式：
$(selector).slideDown(speed,callback); // speed = 时间 、 callback = 回调函数
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);
1、speed 参数规定隐藏/显示的速度、时间，可以取毫秒，默认为 "0"。表示干嘣效果。
2、callback 参数是滑动完成后所执行的函数名称。
需要注意的是，只有display:none的元素才能调用slideDown()展开。
此时jQuery会瞬间把这个元素的高度设置为0，然后显示，并且徐徐展开，最终变为原有CSS的高度。
反过来，slideUp()会把display:block元素的合上，最后变成display:none，高度设置为0
小案例：
小米前端工程师：张小功
第四章 : hover() 鼠标悬停
hover() - 规定当鼠标指针悬停在被选元素上时要运行的两个函数。
公式:
$(selector).hover(function() {
/* Stuff to do when the mouse enters the element */
}, function() {
/* Stuff to do when the mouse leaves the element */
});
hover 完全等同于 mouseenter + mouseleave
但是hover 不等于 mouseover+mouseout
第五章 : animate() 创建自定义动画
提示：默认地，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，要记得首先把元素的 CSS样式 position 属性设置为 relative、fixed 或 absolute！
语法：
$(selector).animate({params},speed,callback);
- 必需的 params 参数定义形成动画的 CSS 属性。
- 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
- 可选的 callback 参数是动画完成后所执行的函数名称。
公式：
$(document).on('click', function() {
$('#box').animate({
'width': 500,
'height': 50,
'background': 'blue', // 颜色无效果
'left': 500,
"border-radius" : "50%"
}, 3000, function functionName() {
alert('自定义动画')
});
})
可以用 animate() 方法来操作大部分 CSS 属性
当使用 animate() 时，必须使用 驼峰命名法 ，比如，必须使用 marginRight 而不是 margin-right，等等。同时，色彩、动画并不包含在核心 jQuery 库中。
所以不能参与animate（）的属性有色彩、动画
background-position
background-color
jQuery animate() - 使用相对值
也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：
实例：
$("button").click(function() {
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
jQuery animate() - 使用队列功能
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
第六章 : delay() 动画延迟出现
delay() - 只能用在动画前面。我们可以利用delay() 和 animate() 写一些很厉害的东西
语法公式：
$().delay(500).show(1000);
$().delay(500).slideDown();
$().delay(500).fadeIn();
$().delay(500).animate();
delay(800)表示动画延迟出现。必须书写时间参数，不写单位表示毫秒。
$(document).ready(
function() {
/**
*1.delay函数是jquery 1.4.2新增的函数
*2.hide、show函数里必须放一个时间参数,不然延时不起作用
*/
$('#divid').delay(800).hide(0);
}
);
应用举栗
$("#btn").click(function(){
$("div").delay(2000).show(1000,function(){
$("div").css("background-color","red");
});
$("h3").delay(2000).animate({"left":800},2000,function(){
$("h3").css("background-color","red");
});
});
利用delay（）控制元素的进场顺序。
第七章 : stop() 停止动画
stop() - 用于在动画或效果完成前对它们进行停止。stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
语法
$(selector).stop(stopAll,goToEnd);
/* stop()表示运动的元素立即停止运动。参数接收2个布尔值，（默认值是false）*/
- 可选的 stopAll 参数表示
是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。 - 可选的 goToEnd 参数表示
是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
stop() 等价stop(false,false) :表示立即进入下一个动画，立即停止当前动画。
stop(true) 等价stop(true,false)： :表示清空动画队列，立即停止当前动画。
stop(true,true) :表示情况动画队列，立即停止并完成当前动画。
stop(false,true) :表示立即进入下一个动画，立即停止并完成当前动画。
第一个参数的意思是是否清空动画序列，也就是stop的是当前元素的动画效果还是停止后面附带的所有动画效果，一般为false，跳过当前动画效果，执行下一个动画效果；
第二个参数是是否将当前动画效果执行到最后，意思就是停止当前动画的时候动画效果刚刚执行了一般，这个时候想要的是动画执行之后的效果，那么这个参数就为true。否则动画效果就会停在stop执行的时候。
stop(true)就是当前停止，后面的继续 => 较为常用
stop(true,true)就是结束
$circles.mouseenter(function(){
// 老图淡出
$imgLists.eq(index).stop(true).fadeOut(500);
// 信号量改变
index = $(this).index();
// 新图淡入
$imgLists.eq(index).stop(true).fadeIn(500);
// 小圆点改变
$(this).addClass("cur").siblings().removeClass("cur");
});
防止动画的积累
一个元素身上可能会有多个动画，尤其是不经意间积累的动画。这时需要防止（也叫防流氓。）
比如：现在有一个在北京的队伍接到命令去广州。在去广州路上，又接到命令，掉头回北京。
现在有两个策略：
①放弃原有任务，立即执行新任务。
直接利用stop（true）方法。
②忽视新任务，继续执行当前动画。
直接利用is(":animated") 方法。
is()。方法在jquery中表示"是不是"意思。表示某一元素是否具有某种状态。返回值是布尔值要么是true要么false。
is(":animated") 表示元素是否在运动。