jQuery动画(一)

前言

jQuery的一项很诱人的功能是可以在HTML元素上实现动画效果,例如显示、隐藏、淡入淡出和滑动等。相对于用javascript来说,用jQuery往往能事半功倍。闲话不说,开始我们今天的主题。

自定义动画

先看看咱们要实现的效果吧,这是在某个网站中搜索框的特效

怎么样,是不是似曾相识呢?

关键方法:

:产生动画效果的css属性和值。可以使用的css属性包括backgroundPosition,borderWidth,width,height,font,fontsize,bottom,left,right,top,letterSpacing,lineHeight,textIndent等

:指定动画效果运行的时间长度,单位为ms,默认值为normal(400ms)。可选值包括"slow"和"fast",也可以指定具体的数字

:指定用于设置不同动画点中动画速度的easing函数(也称动画缓冲函数)

:指定动画效果执行完后调用的函数

布局

样式

jquery

相信这些代码对于聪明的你来说简直是小菜一碟啦,如果你还不懂jquery的话,建议你应该去学习一些基本的知识。好啦,咱们看看自己实现的最终效果是怎么样的!

以动画形式显示隐藏HTML元素

关键方法

参数的意思和上面的方法是一样的哦。

,显示HTML元素,参数可选

,隐藏HTML元素,参数可选

,切换HTML元素的显示和隐藏状态,参数可选

布局

样式

jquery

效果演示

总结

其实在你访问过的网站中,随处可见jQuery的身影,它极大地简化了 JavaScript 编程,并且很容易学习。这里所列举的简单动画效果只是jQuery的冰山一角,它能做的事情非常的多!

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180203G0Y4XZ00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券