/*

//基本

  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. Spring Cloud分区发布实践(3) 网关和负载均衡

    注意: 因为涉及到配置测试切换, 中间环节需按此文章操作体验, 代码仓库里面的只有最后一步的代码 准备好了微服务, 那我们就来看看网关+负载均衡如何一起工作 新建一个模块hello-gateway, ...

  2. vue 传参动态

    方法一: router/index.js { path: '/src/views/activitiesDetails', name: activitiesDetails, component: act ...

  3. 免费，好用的天气预报API

    不多说直接上! 一.API服务,天气API 网站:http://api.help.bj.cn/api/ 怎么使用网站有很详细的解释 $.ajax({ type: "GET", // ...

  4. Nginx 配置错误导致漏洞

    目录 1.CRLF注入漏洞 2.目录穿越漏洞 参考链接 1.CRLF注入漏洞 CRLF是"回车+换行"(\r\n)的简称,其十六进制编码分别为0x0d和0x0a.先看payload ...

  5. 搭建NFS文件共享

    1.概述: NFS(Network File System)意为网络文件系统,它最大的功能就是可以通过网络,让不同的机器不同的操作系统可以共享彼此的文件.简单的讲就是可以挂载远程主机的共享目录到本地, ...

  6. 树莓派压力测试工具S-Tui + Stress的使用

    压力测试工具S-Tui + Stress的使用 树莓派# 背景故事 打算测试一下树莓派外壳的散热性能,需要能压满CPU100%,同时显示温度.CPU频率.CPU占用率,那么这款工具你值得拥有. 软件介 ...

  7. 使用VNC远程安装CentOS 7操作系统

    使用VNC远程安装CentOS 7操作系统 by 无若 数据中心一般都不在本地,如果希望重新安装系统,难道还要跑到数据中心...所以必须要有一种方式来远程解决这个问题. 目前CentOS 7主要使用的 ...

  8. SpringBoot-技术专区-用正确的姿势如何用外置tomcat配置及运行（Tomcat优化分析）

    前提概要 在特别特殊的时候,我们可能需要外置tomcat去运行程序,例如alitomcat等特殊场景,方便我们去定时化开发项目或者其他特殊场景. 外置tomcat执行 pom.xml文件首先更改打包方 ...

  9. JQuery常用属性操作，动画，事件绑定

    jQuery 的属性操作        html() 它可以设置和获取起始标签和结束标签中的内容. 跟 dom 属性 innerHTML 一样.        text() 它可以设置和获取起始标签和 ...

  10. Git的使用以及整理

    Usage of Git 1 Git区域划分 1)工作区(working directory):默认为项目根目录root 2)缓存区(stage):在版本库中设立一个缓存/暂存区,直接和工作区的文件进 ...