• jq动画分为：基本动画和综合动画；
  • 基本动画的作用都是显示隐藏；
  • 综合动画是将自定义的属性放进去设置；
  • 基本动画分为：
  • show（）、hide（）、toggle（）：相对于左上角显示隐藏；
  • slideDown（）、slideUp（）、slideToggle（）：在高度上显示隐藏；
  • fadeIn（）、fadeOut（）、fadeToggle（）：是关于透明度上的显示隐藏；
  • 基本动画的参数：
  • 一共三个参数：（动画执行事件，动画效果，动画执行完以后回调函数）；
  • 动画效果有两种：
  • swing（默认）、linear（匀速）
  • 综合动画指的是：animate（）

1、基本动画介绍：

  • show（）、hide（）、toggle（） ：控制高度、宽度和透明度的变化；
  • show（）作用：从左上角沿着对角线显示；
  • hide（）作用：沿着对角线往左上角隐藏；
  • toggle（）作用：是切换的作用，如果属性在显示着，就让它隐藏；如果在隐藏着，就让它显示；
<script>
        $("#myshow").click(function(){
            $("#box").show(1000,"linear",()=>{
                console.log("显示完成")
            })
        })
        $("#myhide").click(function(){
            $("#box").hide(1000,"linear",()=>{
                console.log("隐藏完成")
            })
        })
        $("#mytoggle").click(function(){
            $("#box").toggle(1000,"linear",()=>{
                console.log("切换")
            })
        })
</script>

完整代码：

<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>
        #box{
            width: 300px;
            height: 300px;
            background-color: yellow;
        }
    </style>
    <script src="./lib/jquery-3.6.1.js"></script>
</head>
<body>
    <button id="myshow">显示</button>
    <button id="myhide">隐藏</button>
    <button id="mytoggle">切换</button>

    <div id="box"></div>
    <script>
        $("#myshow").click(function(){
            $("#box").show(1000,"linear",()=>{
                console.log("显示完成")
            })
        })
        $("#myhide").click(function(){
            $("#box").hide(1000,"linear",()=>{
                console.log("隐藏完成")
            })
        })
        $("#mytoggle").click(function(){
            $("#box").toggle(1000,"linear",()=>{
                console.log("切换")
            })
        })
    </script>
</body>

结果： 

 

 

  • slideDown（）、slideUp（）、slideToggle（）：是控制高度的，高度发生改变，从而是实现显示和隐藏的效果；
  • slideDown（）：从上往下，高度从低变高，放的一个过程，显示的功能；
  • slideUp（）：从下往上，高度从高变低，收的一个过程，隐藏的功能；
  • slideToggle（）：切换，显示着就让它隐藏，隐藏着就让它显示；

代码：（剩下的代码和上面的一样）

<script>
        $("#myDown").click(function(){
            $("#box").slideDown(1000,"linear",()=>{
                console.log("显示完成")
            })
        })
        $("#myUp").click(function(){
            $("#box").slideUp(1000,"linear",()=>{
                console.log("隐藏完成")
            })
        })
        $("#mytoggle").click(function(){
            $("#box").slideToggle(1000,"linear",()=>{
                console.log("切换")
            })
        })
    </script>

结果：

  • fadeIn ()、fadeOut ()、fadeToggle ()、fadeTo ()：控制透明度来实现显示和隐藏的功能；
  • fadeIn ():显示的过程，透明度由0变为1；
  • fadeOut ():隐藏的过程，透明度由1变为0；
  • fadeToggle ()：切换，显示时，让它隐藏；隐藏时让他显示；
  • fadeTo (4个参数)：指定到透明度，参数有4个，第2个参数时设置透明度的；
<script>
        $("#myDown").click(function(){
            $("#box").fadeIn(1000,"linear",()=>{
                console.log("显示完成")
            })
        })
        $("#myUp").click(function(){
            $("#box").fadeOut(1000,"linear",()=>{
                console.log("隐藏完成")
            })
        })
        $("#mytoggle").click(function(){
            $("#box").fadeToggle(1000,"linear",()=>{
                console.log("切换")
            })
        })
        $("#myfade").click(function(){
            $("#box").fadeTo(1000,0.2,"linear",()=>{
                console.log("切换")
            })
        })
</script>

结果：

 

2、综合动画

  • 限制：不支持过渡的样式、颜色变化不支持、transform不支持；
<body>
    <div id="box"></div>
    <script>
        $("#box").animate({
            width:100
        },1000,"linear",()=>{
            console.log("执行完毕")
        })
    </script>
</body>
  • animate（）：四个参数，第一个参数是对象，也就是要设置的属性都在这里面设置，第2,3,4参数和上面基本动画一样；

3、stop（）、finish（）

  • stop（）：停止动画，运动到哪里，就停在那里；
  • finish（）：停止动画，运动到哪，立即到完成位置；
  • 停止动画一般都是在其他动画函数之前调用；
  • 先停止其他的动画再去执行当前的动画；
<body>
    <div id="box"></div>
    <script>
        $("#box").stop().animate({
            width:100
        },1000,"linear",()=>{
            console.log("执行完毕")
        })
    </script>
</body>

运用案例请参考：
jq案例--手风琴：stop（）应用_陌一一的博客-CSDN博客

jq制作滑动选项卡-mouseover()、stop()、animate（）综合应用_陌一一的博客-CSDN博客 

 

# css3 # javascript # css # jquery # 动画
Logo
EazyDevelop社区

一站式 AI 云服务平台

更多推荐

探秘深海：一款强大的深度学习框架——DeepSea

在人工智能领域中，深度学习是推动科技进步的一股强大动力。今天，我们要向大家推荐的是一个专为深度学习爱好者和开发者打造的强大框架——DeepSea。该项目由Team-Neptune团队开发，并托管在Gitcode平台上，旨在简化和加速深度学习模型的研发过程。## 技术分析### 灵活的架构设计DeepSea采用模块化的设计，允许用户根据需求选择不同的组件，如优化器、损失函数等，以构建定制

avatar EazyDevelop社区
cover

从零开始搭建个人RAG知识库：RAGFlow+DeepSeek保姆级教程！

avatar EazyDevelop社区

taosync：适用于AList v3的自动化同步工具

在现代生活中，数据同步和备份已成为维护数据安全的关键环节。taosync是一款专为AList v3设计的自动化同步工具，能够帮助用户轻松地同步和备份他们的数据到多个网盘或FTP存储服务。这款工具的开发初衷是为了保存孩子的成长照片，其名称“taoSync”也因此而来。taosync以开源免费的形式提供，支持几乎所有的常用平台，并且提供了完善的日志记录、任务管理以及安全的密码加密功能。## 项目技

avatar EazyDevelop社区