zoukankan      html  css  js  c++  java
  • jQuery animate动画 stop()方法详解~

    一、动画格式:

      格式一:jQueryObject.animate( cssProperties, options )

      格式二:$('#id').animate( styles[, duration ] [, easing ] [, complete ] )

      手动调用方法:$('#id').dqueue( [ queueName ] )

      停止方法:$('#id').stop( [ queueName ] [, clearQueue [, jumpToEnd ]  )

    二、属性介绍:

    2-1、animate属性:部分资料来源:更多>>

      styles: 执行的css动画集合:一个或多个css属性的键值对所构成的Object对象。

      speed/option: 执行时间/可以设置相关属性(指定动画运行多长时间(毫秒数),默认值为400。该参数也可以为字符串"fast"(=200)或"slow"(=600));

      easing:指定使用何种动画效果,默认为"swing",还可以设为 "linear"或其他自定义的动画样式函数。

      callback:回调函数

    2-2、stop属性:

      queueName:(默认:'fx')需要停止动画的队列名称;

      clearQueue:(默认:false)是否执行清除后续队列:$(selector).animate(a,b,c)..animate(a2,b2,c2).animate(a3,b3,c3)...N;

      jumpToEnd:(默认:false)是否停止当前执行的动画同时直接跳到动画的效果最终结果;

    示例:

    1、自动执行

    $(selector).animate(a,b,c)..animate(a2,b2,c2).animate(a3,b3,c3)...N;

    stop()方法使用实例:

    $('#btnstop').click( function(){
        var v = $('#animation').val();//文本框或其他控件传入1、2、3、4等值
        var $myDiv = $('#myDiv');
        if(v == '1'){
            $myDiv.stop( ); // 停止当前动画,不清空队列,即会继续执行下一个动画效果
        }else if(v == '2'){
            $myDiv.stop( true ); // 停止当前动画,清空队列,及停止全部动画效果
        }else if(v == '3'){
            $myDiv.stop( 'fx', true ); // 等同于'2''fx'
        }else if(v == '4'){
            $myDiv.stop( true, true ); // 清空队列,直接完成当前动画
        }
    } );


    2、手动执行
    animate代码:
    $('#dv').animate({

        'borderWidth':'20px',

        'position'.'absolute',

        'left','20px',

        'top','20px'

        },{

        duration:3000,//执行动画的时间(毫秒)

        easing:'swing',//指定使用何种动画效果

        queue:'qName'//指定动画名称

        })

      调用方法代码:

      $('#btnStar').clik(function (){

        $('#id').dqueue('qName')//$('#id')对象执行动画名称为'qName'的动画

        }

      停止方法代码

      $('#btnStop').clik(function (){

        $('#id').stop('qName')//$('#id')停止执行动画名称为'qName'的动画

        }

     以上都是对方法 animate() & .stop()的个人理解!!如有错误请回复指正!

     
  • 相关阅读:
    移动开发 Native APP、Hybrid APP和Web APP介绍
    urllib与urllib2的学习总结(python2.7.X)
    fiddler及postman讲解
    接口测试基础
    UiAutomator2.0 和1.x 的区别
    adb shell am instrument 命令详解
    GT问题记录
    HDU 2492 Ping pong (树状数组)
    CF 567C Geometric Progression
    CF 545E Paths and Trees
  • 原文地址:https://www.cnblogs.com/jicheng/p/5948721.html
Copyright © 2011-2022 走看看