/*

//基本

  show([s,[e],[fn]])   显示元素

  hide([s,[e],[fn]])   隐藏元素

//滑动

  slideDown([s],[e],[fn])  向下滑动

  slideUp([s,[e],[fn]])    向上滑动

//淡入淡出

  fadeIn([s],[e],[fn])     淡入

  fadeOut([s],[e],[fn])    淡出

  fadeTo([[s],opacity,[e],[fn]])  让元素的透明度调整到指定数值

//自定义

  animate(p,[s],[e],[fn])   自定义动画

  stop([c],[j])             暂停上一个动画效果,开始当前触发的动画效果

*/
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

    <style>

    .box{

        width: 250px;

        height: 250px;

        background-color: #000;

        position: fixed;

        top: 50px;

        left: 10px;

    }

    </style>

</head>

<body>

    <button class="show">显示[入场]</button>

    <button class="hide">隐藏[出场]</button>

    <button class="fidein">淡入[入场]</button>

    <button class="fideout">淡出[出场]</button>

    <button class="slidedown">向下滑动[入场]</button>

    <button class="slideup">向上滑动[出场]</button>

    <button class="animate">自定义动画</button>

    <div class="box"></div>

    <script>

    $(".show").on("click", function(){

        $(".box").show(1000);   // 参数1: 时间,单位毫秒  参数2: 执行效果完成以后的回调函数

    });

    $(".hide").on("click", function(){

        $(".box").hide(1000, function(){

            alert("找不到我了吧~");

        });

    });

    $(".fidein").on("click", function(){

        $(".box").fadeIn(1000);

    });

    $(".fideout").on("click", function(){

        $(".box").fadeOut(1000);

    });

    $(".slidedown").on("click", function(){

        $(".box").slideDown(1000);

    });

    $(".slideup").on("click", function(){

        $(".box").slideUp(1000);

    });

    // 自定义动画

    $(".animate").on("click",function(){

       // $(".box").animate(动画最终效果,动画完成的时间,动画完成以后的回调函数)

       $(".box").animate({

           "border-radius":"50%",

           "left": "120px",

           "top": "200px",

       },2000,function(){

          $(".box").animate({

               "border-radius":"0%",

               "left": "10px",

               "top": "50px",

             },1000,function(){

                 // $('.animate').trigger("click");

             });

       });

    });

    </script>

</body>

</html>

JQ动画的更多相关文章

  1. （21）jq动画

    jq动画的优点 优点: 1.可以知道动画结束的表示(结束的回调函数) 2.可以利用jq动画插件完成复杂的动画 动画有三个参数:动画的样式是字典.动画持续的事件,动画结束回调函数 <!DOCTYP ...

  2. css动画和jq动画的简单区分

    有很多不怎么用css3写动画的同学经常会对其中css3的transform,transition,translate,animation,@keyframes等等动画属性混淆错乱,经常使用了发现没有效 ...

  3. jq动画设置图片抽奖(修改效果版)

    效果:点击开始,图片转动,按钮显示"停止",点击停止,选出中奖号码,,最后一个数字停止时,按钮变为"again",点击"again"开始转动 ...

  4. 自写Jq动画载入插件

    在写网站的时候,有一些dom第一次进入屏幕时需要加一个动画进入效果,如下图 于是,自己就研究下,要是实现gif图中左图效果大致原理就是首先将dom放在他的左侧,并将他的透明度(opacity)设置为0 ...

  5. jq动画插件，自制基于vue的圆形时钟

    首先附上jq插件库,里面的东西太炫了,建议学前端的可以看看学习下:http://www.jq22.com/ 里面有个“超个性动画版本的个人简历”,通过屏幕上不断打印内容,改变相应样式来实现动画简历,我 ...

  6. jq动画和停止动画

    使用jq 实现动画循环效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  7. JQ动画的简单介绍

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...

  8. JQ动画事件

    1.会飞的li html: <ul id="ulL"> <li>中国</li> <li>美国</li> <li&g ...

  9. jq动画实现左右滑动

    <!DOCTYPE html> <html> <head> <title>jquery动画滑动</title> <style type ...

  10. jq动画设置图片抽奖

    (因为自己是前端刚入门的小白所以中间出现很多问题,不过这对于我来说就是一次经验的积累) 预想效果:点击"开始",图片循环旋转,不是同时的效果,而是有一定的时间差.点击"开 ...

随机推荐

  1. Node.js躬行记（7）——定时任务的进化史

    一.纯手工 公司主营的是直播业务,会很许多打榜活动,也就是按主播收到的礼物或收益进行排序,排在前面的会有相应奖励. 纯手工时代,每接到一个活动,就重新写一份,第一次写完.之后就是复制黏贴,再修改,每次 ...

  2. centos的screen使用

    说明,screen 是一款安装在服务器,在单一终端窗口进行多任务切换的软件.好处在于.(1),使用多个窗口进行任务切换操作. 1,安装 (1),yum 安装 : yum install -y scre ...

  3. SQL语句（三）分组函数和分组查询

    目录 一.分组函数 特点 1. 各函数的简单使用 2. 搭配distinct的使用 3. COUNT 统计行数 4. 和分组函数一同查询的字段要求是group by后的字段 二.分组查询 1. 简单应 ...

  4. Kotlin强化实战！这份学习手册让你的面试稳如泰山

    一.引言 正如官网的slogan所描述:kotlin,是一门让程序员写代码时更有幸福的现代语言. 同时,也正如维基百科里介绍: JetBrains公司希望Kotlin能够推动IntelliJ IDEA ...

  5. Ivy入门笔记

    安装过程 命令行安装 下载和安装JDK5.Eclipse3.5.Ant 1.8.Ivy 2.2: 安装JDK:成功标志:在命令行下运行java命令,得到java命令行帮助: 安装Ant:解压Ant,在 ...

  6. VBA·Function的基础使用

    阅文时长 | 0.27分钟 字数统计 | 440字符 主要内容 | 1.引言&背景 2.基本结构 3.Demo示例 4.声明与参考资料 『VBA·Function的基础使用』 编写人 | SC ...

  7. 位(bit)、字节(Byte)、字(Word)、双字(Dword)之间的关系

    位(bit): bit(简写:b),是计算机数据存储最小的单位,二进制中,0或者1就是一个位(比特位)bit. 字节: Byte(简写:B),是计算机信息技术用于计量存储容量的一种计量单位,通常情况下 ...

  8. 内网探测之SPN服务扫描及相关利用

    在写下一个大块之前,补充一些小知识点,也没啥新东西 0x01简介 如果常规扫描服务,结果不理想,非常GG,可以考虑使用SPN进行服务扫描,这是为了借助Kerberos的正常查询行为(向域控发起LDAP ...

  9. （一）Linux之目录结构

    Linux之目录结构 目录 Linux之目录结构 一.概述 一.基本介绍 二.具体的目录结构(不用背,知道即可) Linux /usr目录 Linux /var 目录 一.概述 学习 Linux,不仅 ...

  10. 支持初始化数据的Zookeeper Docker镜像

    最近在做一个演示项目 https://github.com/cnscud/cavedemo, 自然为了方便, 也做了docker打包, 发现zookeeper的镜像没有导入初始化数据的功能, 于是自己 ...