使用jq 实现动画循环效果

<!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>Document</title>

    <style>

    .box {

        height: 200px;

        background-color: green;

        font-size: 60px;

        color: white;

    }

    .item {

        width: 200px;

        height: 200px;

        position: fixed;

        top: 0;

        left: 0;

        background-color: red;

    }

    </style>

</head>

<body>

    <div class="item"></div>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

    <script>

    function run(){

        $('.item').animate({

            width:  '50px',

            height : '50px',

            // backgroundColor : 'yellow',

            //animate不支持背景色的变化，要导入一个jq实现的颜色库

            top: '300px',

            left : '300px'

        },5000,function(){

            $('.item').animate({

                width:  '200px',

                height : '200px',

                top: '0',

                left : '0'

            },3000,run);

        });

    };

    run();

    // 接受三个参数，第一个是对象，接受目标样式列表； 第二个是时间；第三个是执行完成的回调函数

    </script>

</body>

</html>

吧执行的代码封装在函数里，并作为他自己的回调函数。就可以实现动画的反复实现

色彩动画不包含在核心jq库中~~~

padding-left 之类的值要写成驼峰的命名方法

然后，改变的样式，也可以做相对值的运算，相对于原有值

  $('.item').animate({

        width: '+=200px',

        height: '-=50px'

    },3000);

也可以使用预设的值   "show"、"hide" 或 "toggle"：

举个栗子~~

  $('.item').animate({

            width: 'hide'

        }, 3000);

给元素设置了多个animate动画时，会按设置顺序逐一执行。不会产生覆盖。

举个栗子~

 <div class="item">いのししですね</div>

    <button class="btn">button</button>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

    <script>

        $("button").click(function () {

            var div = $("div");

            div.animate({

                height: '300px',

                opacity: '0.4'

            }, "slow");

            div.animate({

                width: '300px',

                opacity: '0.8'

            }, "slow");

            div.animate({

                height: '100px',

                opacity: '0.4'

            }, "slow");

            div.animate({

                width: '100px',

                opacity: '0.8'

            }, "slow");

        });
　　
    </script>
 

jq停止动画

<!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>Document</title>

    <style>

        .wrap {

            width: 300px;

            height: 300px;

            background-color: green;

        }

    </style>

</head>

<body>

    <button class="btn1">start</button>

    <button class="btn2">end</button>

    <div class="wrap">

    </div>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

    <script>

    $('.btn1').click(function(){

        $('.wrap').animate({

            width: '100vw',

            height : '100vh'

        },8000);

    });

    $('.btn2').click(function(){

        $('.wrap').stop();

    });

    </script>

</body>

</html>

https://www.cnblogs.com/sandraryan/

jq动画和停止动画的更多相关文章

  1. jQuery 学习02——效果：隐藏/显示、淡入淡出、滑动、动画、停止动画、Callback、链

    jQuery 效果- 隐藏hide()和显示show() 语法: $(selector).hide(speed,callback);$(selector).show(speed,callback); ...

  2. jQuery 开始动画，停止动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. jQuery动画之停止动画

    语法格式: $(selector).stop(true, false); 第一个参数: + ture: 后续动画不执行 false:后续动画会执行 第二个参数: true: 立即执行完成当前动画 fa ...

  4. 一排盒子，jq鼠标移入的盒子动画移出停止动画,css动画

    css .category > div.active { animation: servicetobig 0.5s ease 1 forwards; } @keyframes serviceto ...

  5. jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载

    jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载 一丶jQuery动画 show,hide, ...

  6. JQuery（二）---- JQ的事件与动画详解

    JQuery的事件 /** * 1.事件绑定的快捷方式: */ $("button:eq(0)").dblclick(function(){ alert("hahaah& ...

  7. jQuery停止动画——stop()方法的使用

    很多时候需要停止匹配元素正在进行的动画,比如,当鼠标选入元素时显示菜单,鼠标离开时隐藏下拉菜单,如果鼠标移入移出过快的话就会导致动画效果与鼠标的动作不一致的情况,此时stop()就派上用场了. sto ...

  8. jQuery 停止动画、jQuery Callback 函数、jQuery - Chaining

    一.jQuery 停止动画 jQuery stop() 方法用于在动画或效果完成前对它们进行停止. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. $(sele ...

  9. stop() 是用于停止动画 :animated 用于判断动画是否在进行中

    stop() 是用于停止动画 if($("element").is(":animated"))  用于判断动画是否在进行中

随机推荐

  1. JavaScript 防抖和节流

    1. 概述 1.1 说明 在项目过程中,经常会遇到一个按钮被多次点击并且多次调用对应处理函数的问题,而往往我们只需去调用一次处理函数即可.有时也会遇到需要在某一规则内有规律的去触发对应的处理函数,所以 ...

  2. 写GULP遇到的ES6问题详解

    Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务.最近复习一下gulp一些基本的写法,在写了一些简单的uglify,rename,concat,clean的处理之 ...

  3. IOS开发基础篇--CAShapeLayer的strokeStart和strokeEnd属性

    http://blog.csdn.net/yixiangboy/article/details/50662704 一.案例演示 最近有一个小需求,就是要做一个圆形进度条,大概样子如下: . 在不知道有 ...

  4. 深入浅出Cocoa 之动态创建类【转】

    在前文<深入浅出Cocoa之类与对象>一文中,我已经详细介绍了ObjC中的 Class 与 Object 的概念,今天我们来如何在运行 时动态创建类.下面这个函数就是应用前面讲到的Clas ...

  5. 工信部<<大数据产业发展规划>>

    大数据产业发展规划 (2016-2020年) 发布时间:2017-01-17  来源:规划司 数据是国家基础性战略资源,是21世纪的“钻石矿”.党中央.国务院高度重视大数据在经济社会发展中的作用,党的 ...

  6. SQLServer —— 变量的使用

    一.局部变量的定义与赋值 定义语法: -- 声明一个局部变量 DECLARE @变量名 数据类型 -- 声明多个局部变量 DECLARE @变量名1 数据类型1, @变量名2 数据类型2 赋值语法: ...

  7. ConvertJavaMiliSecondToDateTime

    private static DateTime ConvertJavaMiliSecondToDateTime(long javaMS)        {            DateTime UT ...

  8. nodeJs学习-16 数据字典示例

    1.banner ID title 标题 varchar(32) sub_title 副标题 varchar(16) src 图片地址 varchar(64) 2.文章 ID author 作者 va ...

  9. Java练习 SDUT-2192_救基友记2

    救基友记2 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 屌丝WP的好基友CZ又被妖鬼给抓走了(CZ啊,CZ-.怎么说 ...

  10. 巨蟒python全栈开发-第11阶段 ansible_project7

    今日大纲 1.发布详情页面 2.前端页面获取分支信息 3.前端界面获取commit信息与tag信息 4.获取线上最新版本 5.发布之实现nginx下线 6.发布之实现server发布 7.前端页面按钮 ...