.show()
写法:.show([during][,easing][,complete])
作用:用于显示元素,用法和hide类似
.hide()
写法:.hide([duration][,easing][,complete])
作用:用于隐藏元素,没有参数的时候等同于直接设置display属性
几个例子
$('.target').hide(); //等同于$('.target').css('display','none')
$('#book').hide(300,function(){alert('Animation complete.')})
$('#book').hide(300,'linear',function(){alert('Animation complete.')})
.slideUp
写法:.slideUp([during][,easing][,complete])
作用:用滑动动画隐藏一个匹配元素,方法将给匹配元素的高度的动画,这会导致页面的下面部分划上去,当一个隐藏动画后,高度达到0的时候,display样式属性被设置为none,以确保该元素不再影响页面布局。
例子:$('#book').slideUp('slow',function(){ //Animation complete})
.slideDown
写法: .slideDown([duration][,easing][,complete])
作用:用滑动动画显示一个匹配元素,方法将给匹配元素的高度的动画,这会导致页面的下面部分滑下去,弥补了显示的方法
例子:$('#book').slideDown('slow',function(){ // Animation complete})
.slideToggle
写法:.slideToggle([duration][,easing][,complete])
作用:用滑动动画显示或隐藏一个匹配元素,方法将给匹配元素的高度的动画,这会导致页面中,在这个元素下面的内容往下或往上滑。display属性值保存在jquery的数据缓存中,所以display可以方便以后可以恢复到其初始值
如果一个元素的display属性值为inline,然后是隐藏和显示,这个元素将再次显示inine。当一个隐藏动画后,高度值达到0的时候,display样式属性被设置为none,以确保该元素不再影响页面布局
('#book').slideToggle('slow', function(){// Animation complete})})
.fadeIn
写法:.fadeIn([duration][,easing][,complete])
作用:通过淡入的方式显示匹配元素,参数含义和上面相同
例子:$('#book').fadeIn('slow',function(){// Animation complete})
.fadeOut
写法:.fadeOut([duration][,easing][,complete])
作用:通过淡出的方式隐藏匹配元素
例子:$('#book').fadeOut('slow', function{ // Animation complete})
.animate
写法:.animate(properties [,duration] [,easing] [,complete] )
补充:properties是一个css属性和值的对象,动画将根据这组对象移动
例子:$(‘#clickme’).click(function(){ $('#book').animate({ opacity:0.25, left: '+=50' , heigt:'toggle'}, 5000, function(){ //Animation complete}) })