隐藏和显示
.hide()隐藏
.show()显示
.toggle()隐藏和显示切换
可以加入时间参数和回调函数（在动画完成时执行）
$('.text').hide()；
$('.text').show(300, function() {
alert('hello.');
});
$('.text').toggle(1000);
渐变.fadeIn() .fadeOut() .fadeToggle()
使用方法同上面相同，效果为淡入淡出
滑动.slideDown() .slideUp() .slideToggle()
使用方法同上面相同，效果为元素的高度逐渐拉开，这会导致页面的下面部分滑下去
<div class="ct">
<ul>
<li class="item">
<h3>标题1</h3>
<p>内容1</p>
</li>
<li class="item">
<h3>标题2</h3>
<p>内容2</p>
</li>
<li class="item">
<h3>标3</h3>
<p>内容3</p>
</li>
<li class="item">
<h3>标题4</h3>
<p>内容4</p>
</li>
</ul>
</div>
<script>
$('.ct .item').on('mouseenter', function(){
$(this).find('p').slideDown(300);
});
$('.ct .item').on('mouseleave', function(){
$(this).find('p').slideUp(300);
});
自定义.animate()
参数包括，CSS属性和值的对象（必须），时间（可选），回调函数（可选），其中回调函数是同步加载的，例子
$(".btn").on('click', function(e){
$(".box").animate({
width: '200px',
height: '100px',
opacity: 0.5,
left: '100px'
}, 1000, function(){
console.log('456')
});
console.log('123')
});
// 动画开始同时打印123，动画结束打印456
一次加载多个动画，并且防止重复点击。
var pos = [
{left: '100px', top: 0},
{left: '100px', top: '50px'},
{left: '200px', top: '50px'},
{left: 0, top: '50px'},
{left: 0, top: 0},
]
var isMove = false;
var $box = $('.box')
$('.btn').on('click',function(){
if(!isMove){
isMove = true;
$box.animate(pos[0])
$box.animate(pos[1])
$box.animate(pos[2])
$box.animate(pos[3])
$box.animate(pos[4], function(){
isMove = false
})
}
})
停止.stop( [clearQueue ]， [ jumpToEnd ] )和清空动画队列.finish()
- .stop()的clearQueue参数为false（默认）的时候为跳过当前动画，从下一个动画开始执行；参数为true的时候则停止整个动画序列，之后的动画不再执行
- .stop()的jumpToEnd参数为false（默认）的时候CSS停在动画执行停止的过程中，参数为true的时候则CSS会跳转到目标状态（及即当前动画完成时的状态）
- .finish()清空动画队列，CSS直接跳转到最后一个动画的目标状态。
var pos = [
{left: '100px', top: 0},
{left: '100px', top: '50px'},
{left: 0, top: '50px'},
{left: 0, top: 0},
]
var $box = $('.box')
$('.btn').on('click',function(){
$box.finish();
// 确保每次动画都是从头开始的
$.each(pos, function(){
$box.animate(this, 1000)
})
})
