目录
1.
隐藏/显示/来回切换显示隐藏
hide（隐藏）
隐藏
默认执行动画会改变元素的高度，高度，透明度
$("#p2").hide();
$("#p2").hide({
duration: 3000, // "slow"、"fast" 或毫秒
complete: function() {
alert('执行3000ms动画完毕')
}
})
$("p").hide(1000,function(){ // ms
alert("The paragraph is now hidden 动画完毕");
});
静态设置
改变样式display为none(一般)
设置位置高度为0
设置透明度为0
注意：
jQuery在做hide操作的时候，是会保存本身的元素的原始属性值，再之后通过对应的方法还原的时候还是初始值。比如一个元素的display属性值为inline，那么隐藏再显示时，这个元素将再次显示inline。一旦透明度 达到0，display样式属性将被设置为none，这个元素将不再在页面中影响布局
show与hide方法本质是修改的display属性。通过visibility属性布局需要通过css方法单独设置。
如果在样式中使用了!important，比如display: none !important，想要show()方法正常工作，必须使用.css('display', 'block !important')重写样式
show（显示）
显示（用法同hide）
$("p").show();
toggle（来回切换显示隐藏）
来回切换显示隐藏（用法同hide）
通过改变CSS的display属性，匹配的元素将被立即显示或隐藏，没有动画。
$("p").toggle();
$("p").toggle(inline);
注意：
display属性将被储存并且需要的时候可以恢复。如果一个元素的display值为inline，然后是隐藏和显示，这个元素将再次显示inline
动态效果为从右至左。横向动作，通过display来判断切换所有匹配元素的可见性
淡入/淡出/来回切换淡入淡出/淡出到指定透明度
fadeIn（淡入）
淡入
仅影响透明度，高度和宽度不会发生变化
$("#p").fadeIn();
$("#p").fadeIn(1000);
$("#p").fadeIn(1000, "linear");
$("#p").fadeIn(1000, function() {
alert("动画执行完毕!");
});
$("#p").fadeIn({
duration: 1000
});
fadeOut（淡出）
淡出（用法同fadeIn）
$("#div1").fadeOut();
fadeToggle（来回切换淡入淡出）
来回切换淡入淡出（用法同fadeIn）
$("#div1").fadeToggle();
fadeTo（淡出到指定透明度）
淡出到指定透明度
$("p").fadeTo("slow", 0.5);
$("p").fadeTo("slow", 0.5, function() {
alert('完成')
});
下滑/上滑/来回切换上下滑
slideDown（下滑）
下滑
$("#p").slideDown();
$("#p").slideDown(1000);
$("#p").slideDown(1000, function() {
// 动画执行完毕后
});
注意：
下拉动画是从无到有，所以一开始元素是需要先隐藏起来的，可以设置display:none
'fast' 和 'slow' 分别代表200和600毫秒的延时,默认400ms。
slideUp（上滑）
上滑（用法同slideDown）
$("#p").slideUp();
本质：找到元素的高度，然后采用一个下滑动画让元素一直滑到隐藏，当高度为0的时候，也就是不可见的时，修改元素display 样式属性被设置为none。
slideToggle（来回切换上下滑）
来回切换上下滑（用法同slideDown）
$("#p").slideToggle();
注意：
display属性值保存在jQuery的数据缓存中，所以display可以方便以后可以恢复到其初始值
当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局
动态效果从下至上。竖向动作，通过高度变化来切换所有匹配元素的可见性
animate
.animate( properties ,[ duration ], [ easing ], [ complete ] )
.animate( properties, options ) // 第二个参数到最后一个参数使用字典格式
说明：
1、properties
一个或多个css属性的键值对所构成的Object对象。所有用于动画的属性必须是数字的：比如常见的，border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing。
属性值的默认单位像素（px）。
除了定义数值，每个属性能使用'show', 'hide', 和 'toggle'
使用驼峰形式，而不是-
2、options
duration ： 执行的时间
easing： easing 缓动函数
step：每一步动画时调用
progress：每一步动画完成后调用
complete：动画完成回调
方式一（举例）
$aaron.animate({
width :300,
height :300
});
$aaron.animate({
width : "+=100px",
height : "+=100px"
});
$aaron.animate({
left: 50,
width: '50px'
opacity: 'show',
fontSize: "10em",
}, 500);
$aaron.animate({
fontSize: "5em"
}, 2000, function() {
alert("动画 fontSize执行完毕!");
});
方式二（举例）
$('#elem').animate({
width: 'toggle',
height: 'toggle'
}, {
duration: 5000,
specialEasing: {
width: 'linear',
height: 'easeOutBounce'
},
complete: function() {
$(this).after('<div>Animation complete.</div>');
}
});
$aaron.animate({
height: '50'
}, {
duration :2000,
step: function(now, fx) {
$aaron.text('高度的改变值:'+now)
},
progress: function(now, fx) {
}
})
stop
.stop( [clearQueue ], [ jumpToEnd ] )
.stop( [queue ], [ clearQueue ] ,[ jumpToEnd ] )
// 停止当前动画，如果队列中有其他动画，执行第二个动画。
$aaron.stop()
// 停止所有动画。
$aaron.stop(true)
// 停止所有动画,并立即变为第一个动画的结束状态。
$aaron.stop(true,true)
网友评论