版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://ligang.blog.csdn.net/article/details/41624969
1. 要使页面中的元素以动画效果移动,必须首先将该元素的"position"属性设置为"relative"或"absolute",否则无法移动该元素的位置。 2. 显示与隐藏 show(speed,[callback]) [callback]为在动画完成时执行的回调函数 hide(speed,[callback]) toggle() toggle(switch) true:显示 false:隐藏 无论是show()和hide()还是toggle()方法,当以动画效果切换页面可见状态时,其元素的width、height、padding和margin属性都将以动画的效果展示。 3. 滑动 slideToggle() slideDown() slideUp() 4. 淡入淡出0.0-->1.0 fadeIn() fideOut() 元素的width和height属性不发生变化,仅是改变元素的透明度 将透明度指定到某一值:fadeTo(speed,opacity,[callback]) 5. 自定义动画:animate(params,[duration],[easing],[callback]) 例:$(this).animate({ width:"20%", height:"70px" },3000,function(){ //动画完成后执行的回调函数 $(this).css({"border":"solid 3px #666"}) .html("变大了"); }) }) 6. 动画停止和延时 stop([clearQueue],[gotoEnd]) [clearQueue]表示是否停止正在执行的动画,[gotoEnd]表示是否立即完成正在执行的动画 delay(duration,[queueName]) duration为延时的时间值,单位为毫秒值 例:$("img").delay(2000).slideToggle(3000); 以上代码说明:延迟后不能自动恢复 7. 动画改变元素属性情况
show()和hide() | 元素以动画效果实现显示与隐藏,可以同时改变元素的多个属性,如宽度、高度、透明度 |
---|---|
fadeIn()和fadeOut() | 元素以动画的效果淡入淡出,仅改变元素的透明度 |
slideUp()和slideDown() | 元素以“卷窗帘”的动画效果显示和隐藏,仅改变元素的高度,其他属性不发生变化 |
fadeTo() | 元素按指定的透明度进行渐进式调整,从而达到一种动画效果。该方法改变的元素的透明度,高度和 宽度不发生变化 |
toggle() | 可以代替show()和hide()两个方法,因此,其改变的元素属性也与show()和hide()方法一样 |
slideToggle() | 可以代替slideUp()和slideDown()两个方法方法,改变元素的属性也与slideUp()和slideDown()方法一样 |
8. 自定义元素的动画效果可以实现其他动画效果 (1) animate()方法代替hide()方法 $("页面元素").hide(600); $("页面元素").animate({height:"hide",width:"hide",opacity:"hide"},600); (2) animate()方法代替fadeOut()方法 $("页面元素").fadeOut(600); $("页面元素").animate({opacity:"hide"},600); (3) animate()方法代替sildeUp()方法 $("页面元素").sildeUp(600); $("页面元素").animate({height:"hide"},600); (4) animate()方法代替fadeTo()方法 $("页面元素").fadeTo(600,"0.8"); $("页面元素").animate({opacity:"0.8"},600);