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()的个人理解!!如有错误请回复指正!

     
  • 相关阅读:
    Spring核心之IoC
    【jmeter】jMeter使用Badboy录制Web测试脚本
    【jmeter】jmeter环境搭建
    【jmeter】Jmeter启动GUI界面出错
    【appium】keyevent的keycode
    !!!!!!!【unittest】unittest需要懂的的技术
    【unittest】unittest单元模块做assert
    【appium】根据UIAutomator定位元素
    【appium】根据class_name定位元素
    【appium】根据name定位元素
  • 原文地址:https://www.cnblogs.com/jicheng/p/5948721.html
Copyright © 2011-2022 走看看