前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jQuery动画与特效--jQuery基础知识点(4)

jQuery动画与特效--jQuery基础知识点(4)

作者头像
奋飛
发布2019-08-15 16:32:37
3.9K0
发布2019-08-15 16:32:37
举报
文章被收录于专栏:Super 前端

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://ligang.blog.csdn.net/article/details/41624969

jQuery中众多的动画与特效方法为提高页面的用户体验度带来了极大的方便!

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);

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2014年11月30日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • jQuery中众多的动画与特效方法为提高页面的用户体验度带来了极大的方便!
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档