专栏首页cwl_Java前端基础-jQuery动画效果

前端基础-jQuery动画效果

第9章 jQuery动画效果

  • jQuery提供了三组基本动画,这些动画都是标准的、有规律的效果,jQuery还提供了自定义动画的功能。
  • 演示动画效果 [08-演示jQuery动画(animate).html]

9.1 三组基本动画

  • 显示(show)与隐藏(hide)与切换(toggle)是一组动画:
  • 滑入(slideUp)与滑出(slideDown)与切换(slideToggle),效果与卷帘门类似
  • 淡入(fadeIn)与淡出(fadeOut)与切换(fadeToggle)
$obj.show([speed], [callback]);
// speed(可选):动画的执行时间
	 // 1.如果不传,就没有动画效果。如果是slide和fade系列,会默认为normal
	 // 2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
     // 3.固定速度字符串,slow(200)、normal(400)、fast(600),如果传其他字符串,则默认为normal。
// callback(可选):执行完动画后执行的回调函数

slideDown()/slideUp()/slideToggle();同理
fadeIn()/fadeOut();fadeToggle();同理

9.2 自定义动画

  • animate: 自定义动画
$(selector).animate({params},[speed],[easing],[callback]);
// {params}:要执行动画的CSS属性,带数字(必选)
// speed:执行动画时长(可选)
// easing:执行效果,默认为swing(缓动)  可以是linear(匀速)
// callback:动画执行完后立即执行的回调函数(可选)

9.3 动画队列与停止动画

  • 在同一个元素上执行多个动画,那么对于这个动画来说,后面的动画会被放到动画队列中,等前面的动画执行完成了才会执行(联想:火车进站)。
// stop方法:停止动画效果
stop(clearQueue, jumpToEnd);
// 第一个参数:是否清除队列
// 第二个参数:是否跳转到最终效果 

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 速读原著-TCP/IP(最大UDP数据报长度)

    理论上,I P数据报的最大长度是6 5 5 3 5字节,这是由I P首部(图3 - 1)1 6比特总长度字段所限制的。去除 2 0字节的I P首部和8个字节的U...

    cwl_java
  • 速读原著-Android应用开发入门教程(动画效果)

    Android 中可以容易地实现绘制的动画效果。 参考示例程序:ApiDemo 的 AnimateDrawables(ApiDemo=>Graphics=>A...

    cwl_java
  • PHP-Laravel启动方式

    方式一:Laravel框架提供了更简单的方式启动项目(相比配置apache) 执行命令:#php artisan serve

    cwl_java
  • iOS学习——核心动画

      Core Animation(核心动画)是一组功能强大、效果华丽的动画API,无论在iOS系统或者在你开发的App中,都有大量应用。核心动画所在的位置如下图...

    mukekeheart
  • Flutter 动画看这篇彻底学通

    静态的画面之所以能够运动,正是基于这一原理。具体应用则是电影放映,动画片播放等场景。

    arcticfox
  • [Android技术专题]动画那点小秘密

    在Android应用开发中我们每天都在接触动画(Activity开、关,页面滑动、点击按钮等都有动画效果),但入门容易,真正做好很难。如果要把效果做得自然、看...

    open
  • Web高性能动画及渲染原理(1)CSS动画和JS动画

    Web动画的本质是元素状态改变造成的样式变更,CSS动画和JS动画的区别并不是由语言来决定的,而是由两者的特点和适用场景来判断的。CSS动画简洁高效,提升交互体...

    大史不说话
  • Flutter动画【1】

    在前面的文章中我们花了很多的时间去讲了Flutter中的Widget以及用户操作,但是我们却很少去关注与用户的交互效果,当然这并不会导致我们的程序崩溃或者不能实...

    flyou
  • 中国第五届CSS大会分享:CSS TIME

    懵懂少年有幸受邀参加3.30中国第五届CSS大会分享,感谢业界大咖的不嫌弃,鉴于CSS的更新频率不及JS各种迭代高,新的特性组织起来对于分享的主题会比较散,所以...

    腾讯技术工程官方号
  • 【iOS开发】iOS 动画详解

    在移动开发中,为了提高用户体验,会用到一些动画来提高应用的视觉效果。让人有眼前一亮的感觉。同时有动画的过渡过程,会让应用看起来不是那么的生硬,更吸引用户。

    吴老师

扫码关注云+社区

领取腾讯云代金券