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. })