jquery——动画篇
1.动画的基础隐藏和显示
1)hide方法
$elem.hide()
.hide("fast / slow")
2)show()方法
$('elem').hide(3000).show(3000)
3)隐藏切换toggle方法
如果元素是最初显示,它会被隐藏
如果隐藏的,它会显示出来
2.上卷下拉效果
1)下拉动画slideDown
.slideDown( [duration ] [, complete ] )
2)上卷动画slideUp
.slideUp( [duration ] [, easing ] [, complete ] )
3)上卷下拉切换slideToggle.slideToggle( [duration ] ,[ complete ] )
4)淡出动画fadeOut
.fadeOut( [duration ], [ complete ] )
5)淡入动画fadeIn
.fadeIn( [duration ], [ complete ] )
6)淡入淡出切换fadeToggle
fadeToggle切换fadeOut与fadeIn效果,所谓"切换",即如果元素当前是可见的,则将其隐藏(淡出);如果元素当前是隐藏的,则使其显示(淡入)。
7)淡入效果fadeTo
fadeIn:淡入效果,内容显示,opacity是0到1
fadeOut:淡出效果,内容隐藏,opacity是1到0
3.自定义动画
1)动画animate(上)
.animate( properties ,[ duration ], [ easing ], [ complete ] )
.animate( properties, options )
2)动画animate(下)
.animate( properties, options )
$('#elem').animate({
width: 'toggle',
height: 'toggle'
}, {
duration: 5000,
specialEasing: {
width: 'linear',
height: 'easeOutBounce'
},
complete: function() {
$(this).after('
来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/1973/viewspace-2798636/ ,如需转载,请注明出处,否则将追究法律责任。