/*

//基本

  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. 【Maven实战技巧】「插件使用专题」Maven-Assembly插件实现自定义打包

    前提概要 最近我们项目越来越多了,然后我就在想如何才能把基础服务的打包方式统一起来,并且可以实现按照我们的要求来生成,通过研究,我们通过使用maven的assembly插件完美的实现了该需求,爽爆了有 ...

  2. Android技术分享| 实现视频连麦直播

    视频连麦产品端核心步骤分析 游客申请连麦/取消申请 主播同意/拒绝申请 音视频发布取消 支持很多观众观看 支持多人连麦 低延时 IM 弹幕 视频连麦技术端调研 emmm,大致可以分为视频采集.编码,传 ...

  3. anyRTC SDK 5月迭代：优化自定义加密功能，让通信更安全

    anyRTC SDK 5月上新,新增多种加密类型,让实时音视频通信更安全:新增移动端推流支持1080P分辨率的支持:此外还对事件上报.日志详情.数据统计.网络传输等多项功能进行了优化改进. 以下为更新 ...

  4. JavaEE精英进阶课学习笔记《博学谷》

    JavaEE精英进阶课学习笔记<博学谷> 第1章 亿可控系统分析与设计 学习目标 了解物联网应用领域及发展现状 能够说出亿可控的核心功能 能够画出亿可控的系统架构图 能够完成亿可控环境的准 ...

  5. 这个 Redis 连接池的新监控方式针不戳~我再加一点佐料

    Lettuce 是一个 Redis 连接池,和 Jedis 不一样的是,Lettuce 是主要基于 Netty 以及 ProjectReactor 实现的异步连接池.由于基于 ProjectReact ...

  6. let 及const

    ES5中的块级作用域 ES5中只有全局作用域和函数作用域,这样带来了很多的不便利,会出现内层变量被外层变量覆盖,循环体中的变量会暴露在全局,很多情况下需要自执行函数来私有化变量. ES6块级的作用域 ...

  7. .Net Core如何优雅的实现中间件

    在.Net Core的源码中,很多地方都有中间件的地方,Kestrel Server和Asp.net Core 等都用了中间件的设计,比如在Kestrel Server中,Http协议的1.0, 1. ...

  8. Vue2.x响应式原理

    一.回顾Vue响应式用法 ​ vue响应式,我们都很熟悉了.当我们修改vue中data对象中的属性时,页面中引用该属性的地方就会发生相应的改变.避免了我们再去操作dom,进行数据绑定. 二.Vue响应 ...

  9. pthread_cleanup_push与pthread_cleanup_pop的理解

    一.为什么会有pthread_cleanup_push与pthread_cleanup_pop: 一般来说,Posix的线程终止有两种情况:正常终止和非正常终止.线程主动调用pthread_exit( ...

  10. 【原创】Spring Data Redis <=2.0.3反序列化漏洞

    Spring Data Redis隶属于Spring Data家族, 提供简单易用的方式来访问Redis缓存. Spring Data Redis在往Redis里面写数据的时候,默认会先对数据进行序列 ...