jQuery的动画属性（三）

最新推荐文章于 2023-06-25 20:51:27 发布

大聪明码农徐

最新推荐文章于 2023-06-25 20:51:27 发布

阅读量339

点赞数 3

分类专栏： jQuery基础文章标签： jquery 动画 css3

本文链接：https://blog.csdn.net/qq_45799465/article/details/123086026

版权

jQuery基础专栏收录该内容

5 篇文章 1 订阅

订阅专栏

一、定义

jQuery的动画函数的原理和我们之前的封装的运动函数的原理相同，都是通过定时器将css样式的改变逐步完成。

二、动画介绍

2.1 显示隐藏

$().show()	显示
$().hide()	隐藏
$().toggle	切换
参数1 时间单位毫秒参数2 方式 linear线性参数3 函数运动结束执行的回调函数

代码展示


    <script>
        // 参数1   时间    单位毫秒
        // 参数2   方式    liner线性
        // 参数3   函数    运动结束 执行的回调函数
        $('[class="show"]').click(function(){
            $('div').show(1000,'linear',() => console.log("我显示了"));
        })

        $('[class="hide"]').click(function(){
            $('div').hide(1000,'linear',() => console.log("我隐藏了"));
        })

        $('[class="toggle"]').click(function(){
            $('div').toggle(1000,'linear',() => console.log("我切换了"));
        })
    </script>

运行结果

2.2 上卷下拉

$().slideDown()	显示
$().slideUp()	隐藏
$().slideToggle()	切换
参数1 时间单位毫秒参数2 方式 linear线性参数3 函数运动结束执行的回调函数

代码演示


    <script>
        // 参数1   时间    单位毫秒
        // 参数2   方式    liner线性
        // 参数3   函数    运动结束 执行的回调函数
        $('[class="slideDown"]').click(function(){
            $('div').slideDown(1000,'linear',() => console.log("我下拉了"));
        })

        $('[class="slideUp"]').click(function(){
            $('div').slideUp(1000,'linear',() => console.log("我上卷了"));
        })

        $('[class="slideToggle"]').click(function(){
            $('div').slideToggle(1000,'linear',() => console.log("我切换了"));
        })
    </script>

运行结果

2.3 渐隐渐现

$().fadeIn()	显示
$().fadeOut()	隐藏
$().fadeToggle()	切换
参数1 时间单位毫秒参数2 方式 linear线性参数3 函数运动结束执行的回调函数
$().fadeTo()	切换到指定的透明度
参数1 时间单位毫秒参数2 透明度指定的透明度参数3 方式 linear线性参数4 函数运动结束执行的回调函数

代码演示


    <script>
        // 参数1   时间    单位毫秒
        // 参数2   方式    liner线性
        // 参数3   函数    运动结束 执行的回调函数
        $('[class="fadeIn"]').click(function(){
            $('div').fadeIn(1000,'linear',() => console.log("我下拉了"));
        })

        $('[class="fadeOut"]').click(function(){
            $('div').fadeOut(1000,'linear',() => console.log("我上卷了"));
        })

        $('[class="fadeToggle"]').click(function(){
            $('div').fadeToggle(1000,'linear',() => console.log("我切换了"));
        })
        // 参数1   时间    单位毫秒
        // 参数2   透明度  指定的透明度
        // 参数3   方式    liner线性
        // 参数4   函数    运动结束 执行的回调函数
        $('[class="fadeTo"]').click(function(){
            $('div').fadeTo(1000,0.3,'linear',() => console.log("我切换到指定透明度了"));
        })
    </script>

运行结果

2.4 自定义动画

$().animate()

参数1 运动的属性 { top:100, left:100 }

参数2 运动的时间单位毫秒

参数3 运动的方式 linear 线性

参数4 运动结束的回调函数

代码展示

    <script>
        $('[class="go"]').click(function(){
            $('div').animate({left:500,opacity:0.5},1000,'linear',() => console.log('我过去啦'))
        })
        $('[class="back"]').click(function(){
            $('div').animate({left:50,opacity:1},1000,'linear',() => console.log('我回来啦'))
        })
    </script>

运行结果

2.5 结束动画

$().stop()

在运动的当前位置立即终止没有执行完毕的运动

在当前位置触发执行新的运动

$().finish()

在运动的当前位置立即终止没有执行完毕的运动

在上一个运动的结束位置触发执行新的运动

默认是使用 async 和 await 按照顺序一个一个的执行。

上一个运动没有执行结束不会触发下一个运动的执行。

防止同时有多个运动被触发执行。

例如；

这里可以看到，每次运动的执行都是在上一次运动完成以后再进行运动。

这样就要添加结束动画

$().stop()

代码展示

  <script>
        $('[class="go"]').click(function(){
            $('div').stop().animate({left:500,opacity:0.5},1000,'linear',() => console.log('我过去啦'))
        })
        $('[class="back"]').click(function(){
            $('div').stop().animate({left:50,opacity:1},1000,'linear',() => console.log('我回来啦'))
        })
    </script>

运行结果

从当前运动的位置返回

$().finish()

代码演示

    <script>
        $('[class="go"]').click(function(){
            $('div').finish().animate({left:500,opacity:0.5},1000,'linear',() => console.log('我过去啦'))
        })
        $('[class="back"]').click(function(){
            $('div').finish().animate({left:50,opacity:1},1000,'linear',() => console.log('我回来啦'))
        })
    </script>

运行结果

从当前运动的最终位置返回