Educoder jQuery动画 第3关:jQuery动画效果——滑动

任务描述

本关任务:掌握jQuery常见的动画效果——滑动,动态效果如下图。

相关知识

为了完成本关任务,你需要掌握:1.slideDown(),2.slideUp(),3.slideToggle(), 4.stop()

slideDown(),slideUp() 和 slideToggle()

前面已经总结过:jQuery的动画语法都是一样的,只是动画名称不一样。

  • slideDown()是向下滑动元素,它的实现原理是:元素的高度从0变为已有的高度

  • slideUp()是向上滑动元素,它的实现原理是:**元素的高度从现在的高度变为0**;

  • slideToggle()是切换滑动效果,它的实现原理是:向上滑动的变为向下滑动,向下滑动的变为向上滑动

下面是它们的显示效果:

stop()

这里需要实现的效果如下:

当点击按钮【动画停止】的时候,向上滑动的动画就会停止。这里用到了stop(),它会停止被选元素当前的动画

基本的html结构如下:

  1. <button class="stop">动画停止</button>
  2. <button class="slide">slide</button>
  3. <div class="item">Hello jQuery!!!</div>

【动画停止】按钮的代码如下:

  1. $(".stop").click(function(){
  2. $(".item").stop();
  3. })
posted @ 2022-05-29 23:56  Q且听风吟  阅读(98)  评论(0)    收藏  举报