博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery 动画效果汇总
阅读量:7283 次
发布时间:2019-06-30

本文共 1161 字,大约阅读时间需要 3 分钟。

1.动画方法说明

方法名 说明
hide()和show()方法 同时可修改多个样式属性,即高度,宽度,不透明度
fadeIn()和fadeOut()方法 只改变不透明度
slideUp()和slideDown()方法 只改变高度
fadeTo()方法 只改变不透明度
toggle()方法 用于替代hide()和show()方法,所以能修改高度、宽度、不透明样式
slideToggle()方法 用来代替slideUp()和slideDown()方法,所以只能改变高度
fadeToggle()方法 用来代替fadeIn()和fadeOut()方法,所以只能改变不透明度
animate()方法 属于自定义动画,以上各种动画的实质都是调用了animate()方法,此外,直接使用animate()方法还能定义其他的样式,如“left”“marginLeft”、“ScrollTop”等

    需要特别注意的是,animate()方法可以用来代替其他所有的动画。

  •    用animate()方法代替show()方法
     1 $("p").animate({height:"show",width:"show",opacity:"show"},400); 
     等价于:
      1 $("p").show(400); 
  • 用animate()方法代替fadeIn()方法
     1 $("p").animate({opacity:"show"},400);
     等价于:
      1 $("p").fadeIn(400); 
  • 用animate()方法代替slideDown()方法
     1 $("p").animate({height:"show"},400); 
     等价于:
      1 $("p").slideDown(400); 
  • 用animate()方法代替fadeTo方法
     1 $("p").animate({opacity:"0.6"},400); 
     等价于:
      1 $("p").fadeTo(0.6,400); 
  • 事实上,这些动画就是animate()方法的一种内置了特定样式属性的简写形式。在animate()方法中,这些特定的样式属性值可以为“show”、“hide”、“toggle”,也可以是自定义的数字(值)
    2.动画队列
    (1) 一组元素上的动画效果
  • 当在一个animate()方法中应用多个属性时,动画会是发生;
  • 当以链式写法应用动画方法时,动画按照顺序 执行;
    (2)多组元素上的动画
  • 默认情况下,动画都是同时发生;
  • 当以回调函数形式应用动画方式(例如css()方法要使非动画方法也按照顺序执行,需要把这些方法写入发哦动画方法的回调函数中),动画按照回调顺序执行。

转载于:https://www.cnblogs.com/lujun1949/p/6492701.html

你可能感兴趣的文章
爱创课堂每日一题九十二天- html常见兼容性问题?
查看>>
linux ,系统管理技巧
查看>>
单反相机机身马达的作用
查看>>
Web服务框架ServiceStack的介绍
查看>>
Lintcode38 Search a 2D Matrix II solution 题解
查看>>
C# 文件下载 : WebClient
查看>>
snmp v3 的安全配置 snmp 认证与加密配置
查看>>
机械硬盘格式化了的文件寻回办法
查看>>
win10扩容C盘后分区不见的资料如何找到
查看>>
使用composer 实现自动加载
查看>>
网络工程师成长日记373-李宁公司项目
查看>>
PHP递归获取二维数组中指定key的值
查看>>
戴尔R720服务器CPLD version : 103
查看>>
以太坊分片Sharding FAQ
查看>>
How to fix onSubmit data validation once and for a
查看>>
Java 11 已发布,String 还能这样玩!
查看>>
spark入门介绍(菜鸟必看)经验技术分享
查看>>
计算机网页设计中布局与排版的主要方法---上海天象网络技术有限公司
查看>>
MariaDB数据库存储引擎、索引和EXPLAIN
查看>>
TDSQL 全时态数据库系统--核心技术
查看>>