/*

//基本

  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. Lambda--Optional、Collectors高级进阶方法

    Lambda--Collectors.optional高级使用 偶然看到了同事groupingBy用法,然后百度衍生出了optional,collectors,map等各种用法.突然发现自己之前写的代 ...

  2. python中单例模式的创建

    # 单例模式(使用装饰器) def singleton(cls): instance = {} def wrapper(*args,**kwargs): if cls not in instance: ...

  3. XCTF-Web进阶-upload1

    显然是让我们上传文件,思路当然是上传一个木马文件,然后通过蚁剑连接查看目录获取flag. 但是当我们想要上传php文件的时候会出现弹窗,并且连"上传"按钮都被禁用了. ext = ...

  4. Send Excerpts from Jenkins Console Output as Email Contents

    Sometimes we need to send some excerpts from Jenkins console output (job logs) as email, such as tes ...

  5. HandlerInterceptor与WebRequestInterceptor的异同

    相同点 两个接口都可用于Contrller层请求拦截,接口中定义的方法作用也是一样的. //HandlerInterceptor boolean preHandle(HttpServletReques ...

  6. Java HashMap【笔记】

    Java HashMap[笔记] HashMap HashMap 基本结构 HashMap 底层的数据结构主要是数组 + 链表 + 红黑树 其中当链表的长度大于等于 8 时,链表会转化成红黑树,当红黑 ...

  7. OpenCV 之 自定义滤波

    图像处理中,"空间域" 指的是图像平面,因此,空间滤波 可定义为:在图像平面内对像素灰度值进行的滤波 1  空间滤波 1.1  滤波过程 如图,Filter 是一个 3x3 滤波核 ...

  8. SSM自学笔记（二）

    3.SpringMVC入门 1.Spring与Web环境集成 1.1 ApplicationContext应用上下文获取方式 应用上下文对象是通过new ClasspathXmlApplication ...

  9. C#多线程实践-锁和线程安全

    锁实现互斥的访问,用于确保在同一时刻只有一个线程可以进入特殊的代码片段,考虑下面的类: class ThreadUnsafe { static int val1, val2; static void ...

  10. Qt简单的文件创建和读写

    1 QFile fp; //要包含必要的头文件,这里省略 2 QDir(dir); 3 QString path("./"),filename("test.txt&quo ...