zoukankan      html  css  js  c++  java
  • jquery之animate()方法

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    		<style>
    			.box{
    				 200px;
    				height: 200px;
    				margin: 200px 400px;
    				position: absolute;
    				background-color: #330000;
    				border: 1px solid #222222;
    			}
    		</style>
    	<body>
    		<div class="box">
    			
    		</div>
    		<button id="btn">stop</button>
    		<button id="btn2">begin</button>
    	</body>
    	<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
    	<script src="js/haroldjs.js" type="text/javascript" charset="utf-8"></script>
    </html>
    

      

        $().ready(function(){
        
            $('#btn').on('click',function(){
                $('.box').stop(false,true);
            });
            $('#btn2').on('click',function(){            
                        $('.box').animate({
                            left : '350px',
                            top : '350px'
                            },4000);                                
            });
        });

      其中,animate()方法,初级使用中,一般只会用到前两个参数,CSS属性和速度。callback方法还不熟练,暂时不会应用,过后再写。

      其中stop()方法,其中两个参数,分别接受布尔值。

     stop(stopAll.gotoEnd);

      第一个参数为true时,会清除掉队列的所有等待元素,并且停止动画到当前运动位置。

      第二个参数为true时,会直接跳转到动画的结束位置。

  • 相关阅读:
    OSI模型白话
    并发
    初始化与清理
    多线程
    recyclerview Adapter
    recyclerview刷新
    surfaceview
    viewgroup绘制流程
    view配置
    项目遇到的问题
  • 原文地址:https://www.cnblogs.com/lishengjun/p/6522218.html
Copyright © 2011-2022 走看看