zoukankan      html  css  js  c++  java
  • JQuery动画animate的stop方法使用详解

    JQuery动画animate的stop方法使用详解

    animate语法:

    复制代码 代码如下:

    $(selector).animate(styles,speed,easing,callback)
    复制代码 代码如下:

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Testing</title>
    <link rel="stylesheet" href="css/reset.css">
    <script src="js/jquery.js"></script>
    <style>
    .wrap {
    position: relative;
    height: 300px;
    300px;
    border:5px solid #FCF;
    }
    .wrap div {
    position: absolute;
    left: 0;top: 0;
    height: 50px;
    50px;
    background: #FA0;
    }
    </style>
    </head>
    <body>
    <input type="button" id="btn1" value="停止当前动画">
    <input type="button" id="btn2" value="停止所有动画">
    <input type="button" id="btn3" value="停止所有动画,到达终点">
    <div class="wrap">
    <div></div>
    </div>
    <script>
    function moveX(){
    $('.wrap div').animate({'left':'250px'},1000).animate({'left':'0px'},1000);
    } moveX();

    $('#btn1').click(function(){
    $('.wrap div').stop(); // 停止当前动画,沿路返回起点,若是返回过程中再点击,会暂停在路中
    clearInterval();
    })

    $('#btn2').click(function(){
    $('.wrap div').stop(true); // 停止所有动画 去的路程中点击停止会直接到达终点,若是返回过程中再点击,会暂停在路中
    })

    $('#btn3').click(function(){
    $('.wrap div').stop(true,true); // 停止所有动画 ,去的路程中点击停止会直接到达终点,若是返回过程中再点击,会停止到在起点
    })

    // .stop() // 停止当前动画
    // .stop(true) // 停止所有动画
    // .stop(true,true) // 停止所有动画,到达动画终点
    </script>
    </body>
    </html>


    .stop(); // 停止当前动画,沿路返回起点,若是返回过程中再点击,会暂停在路中

    .stop(true); // 停止所有动画 去的路程中点击停止会直接到达终点,若是返回过程中再点击,会暂停在路中

    .stop(true,true); // 停止所有动画 ,去的路程中点击停止会直接到达终点,若是返回过程中再点击,会停止到在起点

  • 相关阅读:
    Java 第十一届 蓝桥杯 省模拟赛 螺旋矩阵
    Java 第十一届 蓝桥杯 省模拟赛 螺旋矩阵
    Java 第十一届 蓝桥杯 省模拟赛 正整数的摆动序列
    Java 第十一届 蓝桥杯 省模拟赛 正整数的摆动序列
    Python abs() 函数
    Python数学常量
    Python三角函数
    Python随机数函数
    Python数学函数
    语义分割模型优化
  • 原文地址:https://www.cnblogs.com/koleyang/p/4718379.html
Copyright © 2011-2022 走看看