四种简单的有手就能学会的jQuery动画效果

最新推荐文章于 2024-05-09 11:10:14 发布

原创最新推荐文章于 2024-05-09 11:10:14 发布 · 1.9k 阅读

10 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#jquery

个人笔记专栏收录该内容

23 篇文章

订阅专栏

本文介绍了jQuery中的四种基本动画效果：显示/隐藏、淡入淡出、滑动以及自定义动画。详细讲解了每个动画方法的参数，包括速度、缓动效果和回调函数，并提供了多个综合案例展示如何使用这些动画效果。

jQuery封装了JavaScript常用的的功能代码，优化了DOM操作，事件处理，动画设计和Ajax交互。
我们这里就简单介绍一下滑动滑出，隐藏显示，淡出淡入，自定义动画这四种简单的动画方式

参数

不管是显示显示隐藏，滑动，还是淡出淡入，三种方式的参数和效果大致是一样的，这里在分别讲述方式前简述一下参数，若有细节则单独领出来讲

该类方式有三个参数，分别用逗号分开，可以全部省略。但若无任何参数，无动画直接显示

[spped]:指的的速度,可加可不加，通常有两种：

1.三种预定速度之一的字符串

slow:表示缓慢显示
normal：表示一般速度显示
fast：表示快速

2.用数字表示动画时长的毫秒数

不需要任何引号和单位，用数字则为动画时长的毫秒数

[easing]:用来指定切换效果，默认swing

“swing” - 在开头/结尾移动慢，在中间移动快

“linear” - 匀速移动

[fn]:回调函数，在动画完成执行的函数，每个元素执行一次

一、显示隐藏

1.show()

show()方式可以让隐藏的元素显示出来。

2.hiden()

show()方式可以让隐藏的元素隐藏。

1.toggle()

show()方式可以让元素在隐藏和显示两种状态切换。

综合案例

示例代码:

   <style>
        div {
            width: 150px;
            height: 300px;
            background-color: pink;
        }
    </style>
    <script src="../jquery.min.js"></script>

</head>

<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
    <script>
        // 一般情况下不加参数，直接显示隐藏就可以了
        $(function() {
            // hide()隐藏
            $('button').eq(1).click(function() {
                $('div').hide("fast", function() {});
            });
            // show()显示
            $('button').eq(0).click(function() {
                $('div').show("slow", function() {});
            });
            // 切换
            $('button').eq(2).click(function() {
                $('div').toggle(1000);
            });
        });
    </script>

效果:
请添加图片描述

二、淡出淡入

1.fadeIn()

淡入动画

2.fadeOut()

淡出动画

3.fadeToggle()

淡出淡入切换

参数

fadeTo([speed],opacity,[easing],[fn])
其中[speed],[easing],[fn]和其他方式没有任何区别且可以省略
opacity：表示的为透明度，取值范围[0~1],越大透明度越高

综合案例

代码：

    <style>
        div {
            width: 150px;
            height: 300px;
            background-color: pink;
            display: none;
        }
    </style>
    <script src="../jquery.min.js">
    </script>
<body>
    <button>淡入效果</button>
    <button>淡出效果</button>
    <button>淡入淡出切换</button>
    <button>修改透明度</button>
    <div></div>
    <script>
        $(function() {
            $('button').eq(0).click(function() {
                // 淡入动画fadeIn()
                $('div').stop().fadeIn(1000);
            });

            $('button').eq(1).click(function() {
                // 淡出动画fadeOut()
                $('div').stop().fadeOut(1000);
            });

            $('button').eq(2).click(function() {
                // 淡入淡出动画fadeToggle()
                $('div').stop().fadeToggle(1000);
            });

            $('button').eq(2).click(function() {
                // 淡入淡出动画fadeToggle()
                $('div').stop().fadeToggle(1000);
            });

            $('button').eq(3).click(function() {
                // 用渐进方式调整不透明度fadeTo()
                // 速度和透明度两个参数必须写
                $('div').stop().fadeTo(1000, 0.5);
            });

        });
    </script>

效果：

请添加图片描述

三.滑动

1.slideDown()

滑出元素

2.slideUp()

滑入元素

4.slideToggle()

以滑动动画切换元素状态

综合案例

案例代码：

  <style>
        div {
            width: 150px;
            height: 300px;
            background-color: pink;
            display: none;
        }
    </style>
<body>
    <button>下拉滑动</button>
    <button>上拉滑动</button>
    <button>切换滑动</button>
    <div></div>
    <script>
        $(function() {
            // 下滑动slideDown()
            $('button').eq(0).click(function() {
                $("div").slideDown();
            });
            // 上滑动slideUp()
            $('button').eq(1).click(function() {
                $("div").slideUp();
            });
            // 滑动切换
            $('button').eq(2).click(function() {
                $("div").slideToggle();
            });

        });
    </script>

效果:
请添加图片描述

四. animate()

自定义动画

参数

animate(params,[spped],[easing],[fn])

其中[spped],[easing],[fn]三个参数和上述相同，不再多述我们主要讲述params。

params:
1.想要改变的样式属性，以对象形式填写
2.必须写
3.属性名可以不用加引号
4.如果是复合属性则需要采用驼峰命名
5.params:一般针对数字元素属性改变，对颜色类无效

案例

案例代码：

    <style>
        div {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
<body>
    <button>动起来</button>
    <div>123</div>
    <script>
        $(function() {
            $("button").click(function() {
                $('div').animate({
                    left: 500,
                    top: 300,
                    opacity: .4,
                });
            });
        });
    </script>

效果：请添加图片描述