jQuery的动画-显示/隐藏-上卷/下拉-渐隐渐显-自定义动画-终止动画_毎天要喝八杯水的博客-程序员宅基地_jquery渐显

技术标签: html5  动画  jquery  

1、隐藏显示

        $().show()   显示

        $().show()   隐藏

        $().toggle()  切换

                参数1:执行的时间 单位是 毫秒

                参数2:执行方式 linear 线性

                参数3:执行结束的回调函数

        执行时margin padding width height opacity 都在改变

        执行结束 div 标签 添加 display none 属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        button{
            font-size: 50px;
        }

        div{
            width: 100px;
            height: 100px;
            margin: 100px auto;
            background: pink;
        }
    </style>
</head>
<body>
    <button name="show">显示</button>
    <button name="hide">隐藏</button>
    <button name="toggle">切换</button>
    <div></div>

    <script src=".././jquery.min.js"></script>
    <script>
        $('[name="show"]').click(function(){
            // 操作 div标签 显示
            $('div').show(2000 , 'linear' , function(){
                console.log('运动执行结束了')
            })
        })

        $('[name="hide"]').click(function(){
            // 操作 div标签 隐藏
            $('div').hide(2000 , 'linear' , function(){
                console.log('运动执行结束了')
            })
        })

        $('[name="toggle"]').click(function(){
            // 操作 div标签 切换
            $('div').toggle(2000 , 'linear' , function(){
                console.log('运动执行结束了')
            })
        })

    </script>
</body>
</html>

2、上卷下拉

        $().slideDown()   显示

        $().slideUp()        隐藏

        $().slideToggle()  切换

                参数1:执行的时间单位是 毫秒

                参数2:执行方式 linear 线性

                参数3:执行结束的回调函数

        执行时 margin-top margin-bottom padding-top padding-bottom width height opacity 都在改变;执行结束 div 标签 添加 display none属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        button{
            font-size: 50px;
        }

        div{
            width: 100px;
            height: 300px;
            margin: 100px auto;
            background: pink;
        }
    </style>
</head>
<body>
    <button name="show">显示</button>
    <button name="hide">隐藏</button>
    <button name="toggle">切换</button>
    <div></div>

    <script src="../../../jquery.min.js"></script>
    <script>
        $('[name="show"]').click(function(){
            // 操作 div标签 显示
            $('div').slideDown(2000 , 'linear' , function(){
                console.log('运动执行结束了')
            })
        })

        $('[name="hide"]').click(function(){
            // 操作 div标签 隐藏
            $('div').slideUp(2000 , 'linear' , function(){
                console.log('运动执行结束了')
            })
        })

        $('[name="toggle"]').click(function(){
            // 操作 div标签 切换
            $('div').slideToggle(2000 , 'linear' , function(){
                console.log('运动执行结束了')
            })
        })

    </script>
</body>
</html>

3、 渐隐渐显

        $().fadeIn()        显示

        $().fadeOut()     隐藏

        $().fadeToggle() 切换

                参数1:执行的时间 单位是 毫秒

                参数2:执行的方式 linear 线性

                参数3:执行结束的回调函数

        执行时opacity在改变,执行结束div标签添加display none属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        button{
            font-size: 50px;
        }

        div{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background: pink;
        }
    </style>
</head>
<body>
    <button name="show">显示</button>
    <button name="hide">隐藏</button>
    <button name="toggle">切换</button>
    <div></div>

    <script src="../../../jquery.min.js"></script>
    <script>
        $('[name="show"]').click(function(){
            // 操作 div标签 显示
            $('div').fadeIn(2000 , 'linear' , function(){
                console.log('运动执行结束了')
            })
        })

        $('[name="hide"]').click(function(){
            // 操作 div标签 隐藏
            $('div').fadeOut(2000 , 'linear' , function(){
                console.log('运动执行结束了')
            })
        })

        $('[name="toggle"]').click(function(){
            // 操作 div标签 切换
            $('div').fadeToggle(2000 , 'linear' , function(){
                console.log('运动执行结束了')
            })
        })

    </script>
</body>
</html>

4、自定义动画

        $().animate()

                参数1:运动的属性和属性值 对象形式

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

                参数3:运动的方式 linear

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        button{
            font-size: 50px;
        }

        div{
            width: 100px;
            height: 100px;
            background: pink;
            position: fixed;
            top:100px;
            left: 0;
        }
    </style>
</head>
<body>
    <button name="go">去</button>
    <button name="back">回</button>

    <div></div>

    <script src=".././jquery.min.js"></script>
    <script>
        $('[name="go"]').click(function(){
            $('div').animate( { top:500 , left:500 , width:300 , height:300 } , 2000 , 'linear' , function(){console.log('运动结束了')})
        })


        $('[name="back"]').click(function(){
            $('div').animate( { top:100 , left:0 , width:100 , height:100 } , 2000 , 'linear' , function(){console.log('运动结束了')})
        })
    </script>

</body>
</html>

5、终止动画

        jQuery动画 默认的执行方式是 按照顺序 一个一个的执行动画,上一个动画没有执行结束,下一个动画不会触发执行

        动画的终止;

                $().stop()

                        立刻停止之前没有执行完的所有动画,从标签当前位置开始,立即执行触发的新的动画

                $().finish()

                        立刻停止之前没有执行完的所有动画,从上一个动画的结束位置/目标位置 开始执行触发的新的动画

                相同点:终止的是 当前新触发的动画之前 没有执行结束的所有的动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        button{
            font-size: 50px;
        }

        div{
            width: 100px;
            height: 100px;
            background: pink;
            position: fixed;
            top:100px;
            left: 0;
        }
    </style>
</head>
<body>
    <button name="go">去</button>
    <button name="back">回</button>

    <div></div>

    <script src="../../../jquery.min.js"></script>
    <script>
        $('[name="go"]').click(function(){
            $('div').animate( { top:500 , left:500 , width:300 , height:300 } , 2000 , 'linear' , function(){console.log('运动结束了')})
        })


        $('[name="back"]').click(function(){
            // 在哪儿就从哪儿 开始执行新的动画
            // $('div').stop().animate( { top:100 , left:0 , width:100 , height:100 } , 2000 , 'linear' , function(){console.log('运动结束了')})
            
            // 从上一个运动的终点位置 开始执行新的动画
            $('div').finish().animate( { top:100 , left:0 , width:100 , height:100 } , 2000 , 'linear' , function(){console.log('运动结束了')})
        })
    </script>
</body>
</html>

        

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Canace_Xyxjjcaw/article/details/120678889

智能推荐

关于字符数组以及字符串数组_一尾鱼汤的博客-程序员宅基地

例题13://13.编写一程序,将两个字符串连接起来,结果取代第一个字符串(mark下来加深印象),加油加油加油!(1)自己编写一个strcat函数int main(){ int strcat(char a[100],char b[100]); char a[100]={0}, b[100]={0}; //初始化字符数组; int i=0,j=0; cout&lt;&lt;"请输入两个字符串:"; cin&gt;&gt;a&gt;&gt;b;

Python配置Qt Designer与PyUIC_热心市民付先生的博客-程序员宅基地_python pyuic

Python配置Qt Designer与PyUIC安装pyqt相关包pip install pyqtpip install pyqt5-toolsPyCharm中选择相应的python解释器3. 添加外部工具名称填写自己方便易记得即可,我的名称添加为QTDesigner程序选择designer.exe,位置为当前解释器路径下的Lib\site-packages\pyqt5-tools\designer.exe工作目录为当前项目文件的目录添加选择完毕界面为:确定即可,再次

关于WebSocket_彪彪_的博客-程序员宅基地

原文链接:https://www.liaoxuefeng.com/wiki/1022910821149312/1103303693824096WebSocket是HTML5新增的协议,它的目的是在浏览器和服务器之间建立一个不受限的双向通信的通道,比如说,服务器可以在任意时刻发送消息给浏览器。为什么传统的HTTP协议不能做到WebSocket实现的功能?这是因为HTTP协议是一个请求-响应协议,...

FineUI初学手册_star_2008_的博客-程序员宅基地

女朋友鄙视我原创少...1.下载 进入官方论坛:http://www.fineui.com/bbs/要用到下载源代码和空项目下载http://fineui.codeplex.com/http://fineui.com/bbs/forum.php?mod=viewthread&tid=2123源代码直接下载,注意FineUI版本空项目里下载 对应版本的空项

NSStringDrawingOptions_yinachong的博客-程序员宅基地

NSStringDrawingTruncatesLastVisibleLine:如果文本内容超出指定的矩形限制,文本将被截去并在最后一个字符后加上省略号。如果没有指定NSStringDrawingUsesLineFragmentOrigin选项,则该选项被忽略。NSStringDrawingUsesLineFragmentOrigin:绘制文本时使用 line fragement or

随便推点

Chromium多进程架构初探-兼谈Android平台版本_coloriy的博客-程序员宅基地

Chromium以多进程架构著称,它主要包含四类进程,分别是Browser进程、Render进程、GPU进程和Plugin进程。之所以要将Render进程、GPU进程和Plugin进程独立出来,是为了解决它们的不稳定性问题。也就是说,Render进程、GPU进程和Plugin进程由于不稳定而引发的Crash不会导致整个浏览器崩溃。本文就对Chromium的多进程架构进行简要介绍,以及制定学习计划。

Mybatis源码分析_风铃峰顶的博客-程序员宅基地

实例import org.apache.ibatis.io.Resources;import org.apache.ibatis.session.*;import org.junit.Before;import org.junit.Test;import java.io.IOException;import java.io.InputStream;import java.util.ArrayList;import java.util.List; private SqlSessionF

Composer常见问题汇总_cicibi6696的博客-程序员宅基地

问题一: [Composer\Downloader\TransportException] ...

什么时候不能使用箭头函数_一水茶缘YY的博客-程序员宅基地

共 2670 字,读完需 5 分钟。编译自 Dmitri Pavlutin 的文章,对原文内容做了精简和代码风格优化。ES6 中引入的箭头函数可以让我们写出更简洁的代码,但是部分场景下使用箭头函数会带来严重的问题,有哪些场景?会导致什么问题?该怎么解决,容我慢慢道来。能见证每天在用的编程语言不断演化是一件让人非常兴奋的事情,从错误中学习、探索更好的语言实现、创造新的语言特性是推动编程语言版本迭代的动

vassist的安装_kgduu的博客-程序员宅基地

在网上下载vassist安装压缩文件。1、运行VA_X_Setup

全方位讲解VoIP 的原理及技术知识_demon_evil的博客-程序员宅基地_voip工作原理

通过因特网进行语音通信是一个非常复杂的系统工程,其应用面很广,因此涉及的技术也特别多,其中最根本的技术是VoIP (Voice over IP)技术,可以说,因特网语音通信是VoIP技术的一个最典型的、也是最有前景的应用领域。因此在讨论用因特网进行语音通信之前,有必要首先分析VoIP的基本原理,以及VoIP中的相关技术问题。一、VoIP的基本传输过程传统的电话网是以电路交换方式传输语音,所要求的传