学习日记（12）–jQuery动画

显示与隐藏

两种方式

show()和hide()
toggle()

$().show(speed, fn)
$().hide(speed, fn)

speed是一个可选参数，表示动画的速度，单位为毫秒。如果省略，则表示没有动画效果。speed有两种取值：一种是“字符串”；另外一种是“数值”。

取值说明

“fast” 200毫秒

“normal” 400毫秒（默认值）

“slow” 600毫秒

fn也是一个可选参数，表示

动画执行完成后的回调函数

。在这里，所谓的回调函数，说白了就是

在动画执行完成后执行的一个函数。

实质上
show()
方法会把元素由display: none;还原为原来的状态（
display:block、display:inline-block
等）。

//无动画
$("#btn_hide").click(function () {
    $("img").hide();
});
$("#btn_show").click(function () {
    $("img").show();
});

上面代码其实等价于：

$("#btn_hide").click(function () {
    $("img").css("display" , "none");
});
$("#btn_show").click(function () {
    $("img"). css("display" , "block");
});

只需在括号里加入参数即可实现动画效果

toggle()
$().toggle(speed, fn)

可以使用
toggle()
方法来“切换”元素的显示状态。也就是说，如果元素是显示状态，则会隐藏起来；如果元素是隐藏状态，则会显示出来。参数设置与show()和hide()相同。

淡入与淡出

fadeIn()和fadeOut()
fadeToggle()
fadeTo()

fadeIn()
和
fadeOut()

fadeIn()
方法来实现元素的

淡入效果

，可以使用
fadeOut()
方法来实现元素的

淡出效果

。

$().fadeIn(speed, fn)
$().fadeOut(speed, fn)

参数设置与
show()，hide()
相同

区别：show()与hide()：通过

改变height、width、opacity、displa

y来实现元素的显示与隐藏。看着像是慢慢缩小到消失。

fadeIn()与fadeOut()：通过
改变opacity、display
来实现元素的显示与隐藏。图像淡化到消失。

2.
fadeToggle()

$().fadeToggle(speed, fn)

fadeToggle()
方法来“切换”元素的显示状态。也就是说，如果元素是

显示状态，则会淡出；如果元素是隐藏状态，则会淡入

。参数设置与toggle()相同。

3.
fadeTo()

$().fadeTo(speed, opacity, fn)

淡入效果中，透明度（opacity属性）是从0变化到1。在淡出效果中，透明度是从1变化到0的。在jQuery中，如果想要将元素透明度指定到0~1之间的某个值，可以使用fadeTo()方法。

滑上与滑下实现动态下拉菜单

slideUp()和slideDown()
slideToggle()

1.
slideUp()和slideDown()

$().slideUp(speed, fn)
$().slideDown(speed, fn)

slideUp()
方法来实现元素的滑上效果，可以使用
slideDown()
方法来实现元素的滑下效果。

 //设置一个变量flag用于标记元素状态，是“滑下”还是“滑上”
            var flag = 0;
            $("h3").click(function () {
                if (flag == 0) {
                    $("p").slideDown();
                    flag = 1;
                }
                else {
                    $("p").slideUp();
                    flag = 0;
                }
            });
 <h3>绿叶学习网简介</h3>
 <p>绿叶学习网成立于2015年4月1日</p>

对于滑动动画，我们都是需要

定义一个变量来标识当前元素的滑动状态，然后根据这个变量值判断是执行滑上效果，还是滑下效果。

2.
slideToggle()

$().slideToggle(speed, fn)

使用
slideToggle()
方法来“

切换

”元素的滑动状态。也就是说，如果元素是滑下状态，则会滑上；如果元素是滑上状态，则会滑下。

对于实现上面功能只需要

  $("h3").click(function(){
                $("p").slideToggle();
  })

自定义动画

**

（1）简单动画

（2）累积动画

（3）回调函数**

1.简单动画

在jQuery中，对于自定义动画，我们都是使用
animate()
方法来实现的

$().animate(params, speed, fn)

params是一个必选参数，表示

属性值列表

，也就是元素在动画中变化的属性列表。

speed是一个可选参数，表示

动画的速度

，单位为毫秒，默认为400毫秒。如果省略，则表示采用默认速度。

fn也是一个可选参数，表示动画

执行完成后的回调函数

。

$(this).animate({ "width": "150px", "height": "150px" }, 1000);

jQuery本身有一个缺陷，就是使用

animate()方法时会无法识别background-color、border-color等颜色属性

。因此，我们还需要引入第三方插件jquery.color.js来修复这个bug。

2.累计动画

对于元素的宽度和高度，我们可以结合
+=和-=
这两个运算符来实现累积动画

$("#btn2").click(function () {
                $("#box2").animate({ "width": "+=100px", "height": "+=100px" }, 1000);
            })

简单动画形式只是给定了元素属性的最终值，而累积动画形式是在元素原来值的基础上增加或减少。

此外当我们多次点击【累积动画】按钮后，会发现这个动画效果会不断累加。

3.回调函数

想要在动画执行完成后再实现某些操作，我们就需要用到
animate()
方法中的回调函数。

区别：

 $(this).animate({ "width": "150px", "height": "150px" }, 1000).css("border", "1px solid red"); })

当点击的一瞬间，元素就已经被添加了边框。也就是说，
animate()
方法才刚刚执行，
css()
也一起被执行了。

$(this).animate({ "width": "150px", "height": "150px" }, 1000, function(){ $(this).css("border", "2px solid red");});

元素的动画执行完成后，再用css()方法为元素添加一条边框。

队列动画

jQuery中，队列动画，指的是元素按照一定的顺序来执行多个动画效果。

$().animate().animate().…….animate()

在jQuery中，队列动画可以是任何动画形式，包括：

（1）显示与隐藏（2）淡入与淡出（3）滑上与滑下（4）自定义动画

$(this).animate({ "width": "150px", "height": "150px"}, 1000).fadeOut(1000).fadeIn(1000);

停止动画

jQuery中，使用
stop()
方法来停止元素正在执行的动画效果。

$().stop(stopAll, goToEnd)

stopAll
表示

是否停止队列动画

。当取值为false时，

仅停止当前动画

；当取值为true时，

停止当前动画以及后面所有队列动画

。

goToEnd
表示是否将动画

跳转到最终效果状态。

stop()
等价于
stop(false, false)
，仅停止当前动画，

后面的动画还可以继续执行

stop(true)
等价于
stop(true,false)
，

停止当前动画，并且停止后面的动画

stop(true, true)
停止当前动画

直接跳转该动画最后效果，但不开始下一个动画

stop(false, true)
停止当前动画，

跳到最后一个动画，并且执行最后一个动画

$(this).animate({ "height": "150px" }, 500);
            }, function () {
                $(this).animate({ "height": "50px" }, 500); //移出时返回原状态
            })

使用
hover()
方法定义

鼠标移入和鼠标移出

时的动画效果。当我们快速地移入移出元素时，会发现一个很奇怪的bug：元素会不断地变长变短！也就是说，动画会不断执行，根本停不下来！

在jQuery中，

如果一个动画没有执行完，它就会被添加到“动画队列”中去

。在这个例子中，每一次移入或移出，都会产生一个动画，如果该动画没有被执行完，它就会被添加到动画队列中，然后没有被执行完的动画会继续执行，直到所有动画执行完毕。

解决这类bug的话，我们

只需要在移入或移出动画执行之前加入stop()方法

，就能轻松解决。

$(this).stop().animate({ "height": "150px" }, 500);
}, function () {
    $(this).stop().animate({ "height": "50px" }, 500);    //移出时返回原状态
})

延迟动画

使用**
delay()
**方法来延迟动画的执行。

$().delay(speed)

$("div").click(function () {
                $(this).animate({ "width": "150px" }, 1000)
                     .delay(2000)
                     .animate({ "height": "150px" }, 1000);
            });

判断动画状态

使用
is()
方法来判断元素是否正处于动画状态。如果不处于动画状态，则添加新的动画；如果正处于动画状态，则不添加新的动画。

if(!$().is(":animated"))
{
    //如果不处于动画状态，则添加新的动画
}

:animated
是一个伪类选择器，表示

选取所有正在执行动画的元素

$("figure").hover(function () {
                if (!$(">figcaption", this).is(":animated")) {
                    $(">figcaption", this).animate({ "bottom": "0px" }, 200);
                }
            }, function () {
                if (!$(">figcaption", this).is(":animated")) {
                    $(">figcaption", this).animate({ "bottom": "-30px" }, 200);
                }
            })
<figure>
        <img src="img/ciri.png" alt="">
        <figcaption>《巫师3》之希里</figcaption>
</figure>

这个例子中，
$(">figcaption", this)
表示选取当前元素下面的子元素figcaption，它其实可以等价于
$("figure>figcaption")。

深入理解jQuery动画

所有jQuery动画从本质上来说，都是

通过改变元素的CSS属性值

来实现的。换句话说，jQuery动画其实就是通过将元素的CSS属性从“一个值”在一定时间内平滑地过渡到“另一个值”，从而实现动画效果。

（1）显示与隐藏：通过改变display、opacity、width、height来实现。
（2）淡入与淡出：通过改变display、opacity来实现。
（3）滑上与滑下：通过改变display、height来实现。

实际上，这三种动画形式原来，本质上也就一个东西——animate()！只不过jQuery把它们封装得更加简单而已。

显示与隐藏
$().hide(500);
$().animate({"width":"0", "height":"0", "opacity":"0.0", "display":"none"},500);

淡入与淡出
$().fadeOut(500);
$().animate({"opacity":"0.0", "display":"none"},500);

滑上与滑下
$().slideUp(500);
$().animate({"height":"0", "display":"none"},500);

原文链接：https://blog.csdn.net/WDNMde_/article/details/117375583