动画函数
.show()/.hide()
函数用于显示/隐藏所有匹配的元素。此外,还可以指定元素显示的过渡动画效果。如果元素本身是可见的,则不对其作任何改变。如果元素是隐藏的,则使其可见。
语法:
.show( [ duration ] [, easing ] [, complete ] )/.hide( [ duration ] [, easing ] [, complete ] )
$('button:first-child').on('click', function(){
$('div').show(1000, 'linear', function(){
alert('显示完成时执行')
})
})
$('button:nth-child(2)').on('click', function(){
$('div').hide(1000, 'linear', function(){
alert('隐藏完成时执行')
})
})
.slideUp()/.slideDown()/.slideToggle()
.slideUp()函数用于隐藏所有匹配的元素,并带有向上滑动的过渡动画效果。
.slidDown()函数用于显示所有匹配的元素,并带有向下滑动的过渡动画效果。
.slideToggle()函数用于切换所有匹配的元素,并带有滑动的过渡动画效果。
语法:
.slideUp( [ duration ] [, easing ] [, complete ])/.slideDown( [ duration ] [, easing ] [, complete ])/.slideToggle( [ duration ] [, easing ] [, complete ] )
$('button:first-child').on('click', function(){
$('div').slideUp(1000, 'linear', function(){
alert('隐藏完成时执行')
})
})
$('button:nth-child(2)').on('click', function(){
$('div').slideDown(1000, 'linear', function(){
alert('显示完成')
})
})
$('button:nth-child(3)').on('click', function(){
$('div').slideToggle(1000, 'linear')
})
.fadeIn()/.fadeOut()
.fadeIn()函数用于显示所有匹配的元素,并带有淡入的过渡动画效果。
.fadeOut()函数用于隐藏所有匹配的元素,并带有淡出的过渡动画效果。
$('button:first-child').on('click', function(){
$('div').fadeIn(1000, 'linear', function(){
alert('显示完成')
})
})
$('button:nth-child(2)').on('click', function(){
$('div').fadeOut(1000, 'linear', function(){
alert('隐藏完成')
})
})
.animate()
.animate( properties [, duration ] [, easing ] [, complete ] )
$('#clickme').click(function() {
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function() {
// Animation complete.
});
});