Jquery之基础知识开篇(五)--jQuery中的动画

​1. show和hide方法

  • ("element").show(speed[, callback])-显示element元素
  • ("element").hide(speed[, callback])-隐藏element元素
    [speed] 可取 slow normal fast 或者 直接输入数字(单位:毫秒)
    [callback] 动画完成时执行的回调函数,每个元素执行一次
    注意:
    (1)show() 和 hide() 方法同时修改多个样式属性即高度、宽度和不透明度
    (2)hide() 方法在将内容的 display 属性值设置为 none 之前,会记住原先的 display 属性值,当调用 show() 方法时,会根据之前记住的值来显示元素

​2.淡入淡出: fadeIn方法和fadeOut方法

  • ("element").fadeIn(speed[, callback])-渐入,在指定事件内增加元素的不透明度
  • ("element").fadeOut(speed[, callback])-渐出,在指定事件内降低元素的不透明度
  • fadeTo(speed,opcity,[callback]) //speed,[callback]与show()类似,opcity为透明度,范围0.0-1.0
  • fadeToggle(speed, [callback])-淡入淡出切换
    注意:
    fadeIn() 和 fadeOut() 方法只改变元素的不透明度

​3. 滑动:slideUp方法和slideDown方法

  • ("element").slideUp(speed[, callback])-元素由下到上缩短隐藏
  • ("element").slideDown(speed[, callback])-元素由上至下延伸显示
  • slideToggle(speed, [callback])-滑动切换
    注意:
    slideUp() 和 slideDown() 只改变元素的高度

​4. 动画参数

  • 在 jQuery 中的任何动画效果,都可以指定 3 种速度参数,即 “slow”、“normal” 和 “fast”(时间长度分别是 0.6 秒、0.4 秒和 0.2 秒);也可以使用数组作为时间参数(单位:毫秒)

​5. 自定义动画

animate(params, [speed], [easing], [callback]);
params 动画属性集合
[speed] 动画的速度,slow,normal,fast,或者数字(单位毫秒)
[easing] 动画表现效果,swing 或者 linear
[callback] 动画完成时执行的回调函数,每个元素执行一次
注意:
一个元素可以执行多个animate,从而形成动画队列,依次执行

​6. 停止动画和判断是否处于动画状态

(1)停止元素的动画

  • stop([clearQueue],[gotoEnd]);
    参数都为可选参数
    clearQueue表示boolean值,是否清空未执行完的动画队列
    gotoEnd表示boolean值,是否立即完成正在执行的动画

(2)判断元素是否处于动画状态

  • (element).is(":animated")

(3)延时动画

  • delay(duration, [queueName])
    duration 延时的时间,单位ms
    [queueName] 队列名
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • jQuery 安装 把 jQuery 添加到您的网页 如需使用 jQuery,您需要下载 jQuery 库(会在下...
    Clover园阅读 312评论 0 0
  • 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。 jQuer...
    枇杷树8824阅读 676评论 0 3
  • 隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性。但是通过css...
    老夫撩发少年狂阅读 1,120评论 0 2
  • (续jQuery基础(2)) 四、动画篇 第1章 动画基础隐藏和显示 (1)隐藏元素的hide方法 让页面上的元素...
    凛0_0阅读 469评论 0 6
  • 你脖子扬起来看云云就散了看雨雨就收了看我我就酥了 你是天地生的美得超越人形世间有两种罪恶你笑是一种你不笑是另外一种
    Terrence_zxd阅读 306评论 0 2