JQuery学习记录——动画

最新推荐文章于 2024-04-13 07:06:41 发布

Farigen

最新推荐文章于 2024-04-13 07:06:41 发布

阅读量317

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/Bran_Wang12306/article/details/83052098

前端专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了jQuery中的各种动画方法，包括显示和隐藏、淡入和淡出、滑上和滑下等基本动画，以及自定义动画、队列动画、动画停止、动画延迟等功能。通过实例演示了如何使用这些方法实现丰富的网页动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、显示和隐藏

（1）show()和hide()：

show()方法就是把所选元素的display属性还原为隐藏之前的显示状态（block、inline或者inline-block等）。

hide()方法就是把所选元素的display属性设置为none。

语法：

$().hide(speed,callback)

$(),show(speed,callback)

参数speed为必选参数，表示动画执行的速度，单位是毫秒；

参数callback为可选参数（可以省略），表示动画执行完成之后的“回调函数”。

（2）toggle()：切换”元素的“显示状态”。

语法：

$().toggle() //简单的toggle()

$().toggle(speed , callback); //动画的toggle()

参数speed表示动画执行的速度，单位是毫秒；

参数callback为可选参数（可以省略），表示动画执行完成之后的“回调函数”。

2、淡入和淡出

（1）fadeIn()和fadeOut()：在jQuery中，我们可以使用fadeIn()方法来实现元素的淡入效果，使用fadeOut()方法来实现元素的淡出效果。fadeIn()和fadeOut()这2个方法都是配合使用的。

语法：

$().fadeIn(speed , callback)

$().fadeOut(speed , callback)

speed为可选参数，表示动画执行的速度，单位为毫秒，默认为200毫秒。如果speed参数省略，则采用默认速度。

callback为可选参数，表示动画执行完成之后的回调函数。

（1）show()和hide()，是通过改变height、width、opacity来实现动画的显示与隐藏；
（2）fadeIn()和fadeOut()，只通过opacity来实现动画的显示与隐藏；

不过这2组方法在动画显示与隐藏完成之后，都会设置display:none或者display:block。

这2组方法它们在视觉上也有差别，例如hide()隐藏的效果是从下到上或从右下到左上慢慢折叠缩小，而fadeOut的淡出效果是整体淡化直至消失。

（2）fadeToggle()：通过不透明度变化来切换匹配元素的“显示状态”。

fadeToggle()方法跟toggle()方法很相似，不过toggle()方法通过改变height、width、opacity来实现动画的显示与隐藏，而fadeToggle()只通过opacity来实现动画的显示与隐藏。

demo： $("#img2").fadeToggle();

（3）fadeTo()：将元素透明度指定到某一个值

语法：$().fadeTo(speed , opacity , callback)

speed为可选参数，表示动画执行的速度，单位为毫秒，默认为500毫秒。如果speed参数省略，则采用默认速度。

opacity为必选参数，表示元素指定的透明度，取值范围为0.0~1.0。

callback为可选参数，表示动画执行完成之后的回调函数。

3、滑上和滑下

（1）slideUp()和slideDown()：使用slideUp()实现元素的滑上效果，使用slideDown()方法来实现元素的滑下效果。

语法：

$().slideDown(speed , callback)

$().slideUp(speed , callback)

speed为可选参数，表示动画执行的速度，单位为毫秒，默认值为200毫秒。如果参数省略，则采用默认速度。

callback为可选参数，表示动画执行完成之后的回调函数。

对于滑动效果，一般情况下都是先“滑下”再“滑上”。

demo：用flag参数决定是否执行“滑上”还是“滑下”。

var flag = 0;

$(function () {

      $("h3").click(function () {

           if (flag == 0) {

                $("p").slideDown();

                flag = 1;

           }

           else{

                $("p").slideUp();

                flag = 0;

           }

});

（2）slideToggle()：切换元素的“滑动状态”。

语法：slideToggle(speed , callback)

speed为可选参数，表示动画执行的速度，单位为毫秒，默认值为200毫秒。如果参数省略，则采用默认速度。

callback为可选参数，表示动画执行完成之后的回调函数。

$(function () {

            $("h3").click(function () {

                $("p").slideToggle();

            });

        })

4、自定义动画

（1）简单动画

jQuery动画其实就是通过将元素的某一个属性从“一个属性值”在指定时间内平滑地过渡到“另外一个属性值”来实现动画效果。

animate()方法：

语法：$().animate(params , speed , callback)

params，必选参数，表示“属性:值”列表，也就是元素在动画中变化的属性列表，语法:{"属性1":"属性值1","属性2":"属性值2",……, "属性n":"属性值n"}

speed，可选参数，表示动画的速度，单位为毫秒，默认值为200毫秒。如果参数省略，则采用默认速度；

callback，可选参数，表示动画完成之后执行的函数（即回调函数）。

（2）累加动画

在上面的代码中，我们设置了{"width":"100px"}作为动画参数。如果我们在100px之前加上“+=”，这种形式则表示以元素本身的width为基点进行“累加”；如果我们在100px之前加上“-=”则表示以元素本身的width为基点进行“累减”。

（3）回调函数：

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

demo：如果我们想要将div宽和高变大，在动画“执行完成之后”（看清楚）再调用CSS()方法来添加一个边框。

$(function () {

            $("#lvye").click(function () {

                $(this).animate({ "width": "100px", "height": "100px" }, 1000, function () {

                    $(this).css("border", "5px solid red");

                });

            })

        })

5、队列动画：

语法：$().animate().animte()…….animte()

队列动画，就是按照animate()方法调用的先后顺序来实现的，原理很简单。

6、动画的停止：

语法：$().stop(clearQueue,gotoEnd)

参数clearQueue和参数gotoEnd都是可选参数，取值都为布尔值。两个参数默认值都为false。

参数clearQueue表示是否要清空“未执行”的“动画队列”。这里大家要看准了，清空的是整个“动画队列”，而不仅仅是某一个动画。

参数gotoEnd，表示是否直接将正在执行的动画跳转到末状态。

1、对于jQuery动画，如果一个动画没有执行完就开始了一个新的动画，这个没有执行完的动画就会被添加到队列动画中。然后动画队列中每一个动画会按照顺序执行，知道所有动画执行完毕；

2、stop()方法在实际开发中唯一的用途：停止当前动画，防止动画累积的bug。

demo:

$(function () {

    $("#lvye").hover(function () {

        $(this).stop().animate({ "width": "100px", "height": "100px" }, 500);

    }, function () {

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

    })

})