Jq 中animate()的使用

青旅半醒 2021-09-20 13:06 314阅读 0赞

语法：  
`$(selector).animate(styles,speed,easing,callback)`  
第一个参数是必填项，其它均为可选项。  
来个小栗子

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>animate</title>
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            div{  width: 200px; height: auto;}
            p{
                width: 100%;
                height: 200px;
                background-color: yellow
            }
            span{
                display: block;
                width: 100%;
                height: 0;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div>
            <p></p>
        </div>
        <script>
            setTimeout(()=>{
                $('div').prepend($('<span>'))
                $('span').animate({
                    height: '200px'
                }, 2000, ()=>{
                    if($('span').height() >= 200){
                        $('span').animate({
                        height: '0px'
                    }, 2000)
                    }
                })
                
            },1500)
        </script>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，314人围观）

还没有评论，来说两句吧...

相关阅读

相关 jq利用 animate和mouseenter 做出一些渐变效果

![这里写图片描述][20160609105449388] 如上图所示，鼠标以上时候缓慢变化增加文字说明以下为HTML和CSS以及JS代码 $(docume

柔情只为你懂/ 2024年02月17日 17:33/ 0 赞/ 29 阅读

相关 Vue中使用animate.css

最近把公司官网项目依赖进行了升级，里面用到了animate.css。目前版本4.1.0。目前4.x版本相比之前3.x的breaking change如下： Animate

迷南。/ 2023年10月11日 15:48/ 0 赞/ 21 阅读

相关在Unity中，Animation和Animator区别

场景：在Unity中，Animation和Animator都是用于控制动画的组件，但它们的工作方式和应用场景不同。 Animation Animation是一种

古城微笑少年丶/ 2023年09月25日 19:46/ 0 赞/ 55 阅读

相关 unity的animation的使用

1.首先肯定是美术交给我们一个FBX格式的一个文件， 2.有了这个文件，美术会告诉我们第多少针到多少帧是什么状态，这样子我们就可以来进行分割我们的动作了 3.先将这个文件加

男娘i/ 2022年09月25日 09:21/ 0 赞/ 197 阅读

相关 vue中使用animate.css；animate.css不生效

第一步：安装： npm install animate.css --save 第二步：引入及使用： // main.js中：

小鱼儿/ 2022年09月04日 05:00/ 0 赞/ 114 阅读

相关 Animation & Property Animation 使用

本篇主要讲Animation 和 Property Animation的使用，最后会讲QQ管家桌面火箭作为例子： ![Center][] 在Android中开发动效有两

短命女/ 2022年07月24日 07:29/ 0 赞/ 171 阅读

相关 animate.css的使用

前面的话　　[animate.css][]是一个使用CSS3的[animation][]制作的动画效果的CSS集合，里面预设了很多种常用的动画，且使用非常简单。本文将详

刺骨的言语ヽ痛彻心扉/ 2022年02月03日 15:53/ 0 赞/ 291 阅读

相关 Jq 中animate()的使用

语法： `$(selector).animate(styles,speed,easing,callback)` 第一个参数是必填项，其它均为可选项。来个小栗子

青旅半醒/ 2021年09月20日 13:06/ 0 赞/ 315 阅读

相关 jq animate动画

animate $('选择器').animate({json类型到终点的几何位置/几何大小},毫秒数) 多个变化一起执行

矫情吗；*/ 2021年07月25日 00:25/ 0 赞/ 523 阅读

相关 CSS3动画animation认识和Animate.css的使用

CSS动画可以取代`js`动画在移动端会更加流畅！下面是一个的绘制太阳系各大行星运行轨迹笔记，可以自学参考！ -------------------- 首先我们需要创

爱被打了一巴掌/ 2021年07月04日 22:37/ 0 赞/ 737 阅读