zoukankan      html  css  js  c++  java
  • [ jquery 效果 stop(stopAll,goToEnd) ] 此方法用于停止所有在指定元素上正在运行的动画,如果队列中有等待执行的动画(并且clearQueue没有设为true),他们将被马上执行

    停止所有在指定元素上正在运行的动画,如果队列中有等待执行的动画(并且clearQueue没有设为true),他们将被马上执行

    实例:

    <!DOCTYPE html>
    <html lang='zh-cn'>
    <head>
    <title>Insert you title</title>
    <meta http-equiv='description' content=''.animation' is my page'>
    <meta http-equiv='keywords' content='keyword1,keyword2,keyword3'>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type='text/javascript' src='./js/jquery-1.12.1.min.js'></script>
    <style type="text/css">
        *{margin:0;padding:0;}
        html{font:400 13px/1.2em 'Courier New';color:#000;}
        .animation{100px;height:100px;background:red;border-radius:2px;text-align:center;line-height:100px;color:#FFF;}
        button{background:#FF9E6B;padding:8px 16px;border:0;outline:none;-webkit-outline:none;margin-bottom:15px;font:400 13px/1.2em 'Courier New';color:#FFF;border-radius:2px;}
    </style>
    <script type='text/javascript'>
        $(function(){
            $('.start').click(function(){
                $('.animation').animate({'width':'100px','height':'100px',},0,'linear');
                $('.animation').animate({'width':'150px',},1500,'linear');
                $('.animation').animate({'height':'150px',},1500,'linear');
                $('.animation').animate({'width':'450px','height':'300px',},1500,'linear');
            });
            $('.stop').click(function(){
                /*
                    stop : 该方法传递两个参数,默认值均为 false , 参数解析如下:
                        第一个参数:
                        1.false表示停止当前正在执行的动画但是动画序列并没有清除,
                        2.true清楚改节点上的所有动画序列
                    第二个参数:
                      1.false表示在stop时立即停止动画
                      2.true表示在停止动画的时候将当前属性直接设置成为当前动画的最终目标,例如:在执行第二个动画时点击stop按钮, '.animation' 的width直接设置成为150px;
                */
                $('.animation').stop(true,true);
            });
        });
    </script>
    </head>
    <body>
        <button class='start'>start</button>
        <button class='stop'>stop</button>
        <div class='animation'>stop()及参数</div>
    </body>
    </html>
  • 相关阅读:
    最全的“大数据”学习资源
    民生银行十五年的数据体系建设,深入解读阿拉丁大数据生态圈、人人BI 是如何养成的?【转】
    大数据分析界的“神兽”Apache Kylin有多牛?【转】
    大数据环境下互联网行业数据仓库/数据平台的架构之漫谈-续【转】
    写给大数据开发初学者的话5[转]
    唯品会海量实时OLAP分析技术升级之路
    大数据学习笔记
    元数据
    数据仓库之数据模型
    官方教程:Apache Kylin和Superset集成,使用开源组件,完美打造OLAP系统
  • 原文地址:https://www.cnblogs.com/mysearchblog/p/5621298.html
Copyright © 2011-2022 走看看