基础效果
.hide([duration ] [,easing ] [,complete ])
用于隐藏元素，没有参数的时候等同于直接设置 display 属性
$('.target').hide()
//等同于
$('.target').css('display', 'none')
.show([duration ] [,easing ] [,complete ])
用于展示元素，用法和hide()一样，但是效果是相反的
$('.btn').on('click',function(){
$('.target').show()
})
.toggle([duration ] [,easing ] [,complete ])
用于切换元素的展示和隐藏，用法和上面两个api一样
$('.btn').on('click',function(){
$('.target').toggle()
})
渐变
.fadeIn( [duration ] [, easing ] [, complete ] )
用于渐变显示元素
$('#fadeIn').click(function(){
$('#box').fadeIn(1000)
})
.fadeOut( [duration ] [, easing ] [, complete ] )
用于渐变隐藏元素
$('#fadeOut').click(function(){
$('#box').fadeOut(1000)
})
.fadeTo( duration, opacity [, easing ] [, complete ] )
调整匹配元素的透明度，方法通过匹配元素的不透明度做动画效果
$('#fadeTo').click(function(){
$('#box').fadeTo(1000,0.5)
})
..fadeToggle( [duration ] [, easing ] [, complete ] )
通过匹配的元素的不透明度动画，来显示或隐藏它们，方法执行匹配元素的不透明度动画。当被可见元素调用时，元素不透明度一旦达到0，display样式属性设置为none ，所以元素不再影响页面的布局。
$('#fadeToggle').click(function(){
$('#box').fadeToggle(1000)
})
滑动
.slideDown( [duration ] [, easing ] [, complete ] )
用滑动动画显示一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式
$('#slideDown').click(function(){
$('#box').slideDown(1000)
})
.slideUp( [duration ] [, easing ] [, complete ] )
用滑动动画隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑上去，当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局。 display 样式属性将被设置为none，以确保该元素不再影响页面布局。
$('#slideUp').click(function(){
$('#box').slideUp(1000)
})
.slideToggle( [duration ] [, easing ] [, complete ] )
切换滑上滑下操作
$('#slideToggle').click(function(){
$('#box').slideToggle(1000)
})
自定义动画
.animate( properties [, duration ] [, easing ] [, complete ] )
properties是一个css属性和值的对象，动画将根据这组对象移动
$('#clickme').click(function() {
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function() {
// Animation complete.
});
});
动画队列
如果一个元素要进行很多的Jquery动画效果，代码如下，我们写代码容易进入一个很难受的回调地狱里面代码如下
<body>
<div class="box"></div>
<button id="all">动画</button>
<button id="all-smill">简化代码</button>
</body>
<script>
$('#all').on('click',function(){
$('.box').show(600,function(){
$('.box').hide(600,function(){
$('.box').fadeOut(5000,function(){
$('.box').slideDown(1000,function(){
$('.box').slideUp(1000,function(){
$('.box').slideToggle(3000,function(){
console.log('所有动画执行完毕')
})
})
})
})
})
})
})
</script>
这样的代码看起来不仅仅不好看，而且也不好后期维护，我们根据jQuery的特性，可以改写代码为
$('#all-smill').on('click',function(){
$('.box').show(1000)
.hide(1000)
.fadeOut(1000)
.slideDown(1000)
.slideUp(1000)
.slideToggle(1000,function(){
console.log(‘动画执行完毕’)
})
console.log('动画执行开始')
})
这样代码不仅仅简洁了很多，而且看起来也很舒服
说到这里，我们处理了回调地狱这个问题，我们也说一说关于jQuery的动画队列的问题
队列讲究先进先出
按照上面的代码，我们可以理解成我们的队列里面装入了jQuery函数
1.show()
2.hide()
3.fadeOut()
4.slideDown()
5.slideUp()
6.slideToggle()
当装入好了以后，我们首先执行console.log('动画执行开始')这条语句，然后开始执行按照顺序执行队列里面的动画show() ....
这就是动画队列
.clearQueue
清除动画队列中未执行的动画
.finish
清除动画队列中未执行的动画，并使选择对象达到动画队列的最后一帧
网友评论