zoukankan      html  css  js  c++  java
  • jq-animate

    jq-animate:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>标题</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <style>
    	*{margin:0; padding:0; list-style:none;}
    	.btn{
    		font-size: 20px;
    		padding: 4px 8px;
    	}
    	.box{
    		 140px;
    		height: 100px;
    		background: green;
    		font-size: 24px;
    		border: 2px solid blue;
    		position: absolute;
    		left: 40px;
    		top: 60px;
    	}
    </style>
    </head>
    <body>
    <button class="btn">动画</button>
    <div class="box">我是div标签</div>
    
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    <script>
    	$('.btn').click(function (){
    		$('.box').animate({
    			left:'1000px'
    		},{
    			// queue:true,
    			duration:1000,
    			easing:'swing',
    			complete:function (){
    				$('.box').css('background','red');
    			}
    		}).animate({
    			top:'500px'
    		},{
    			// queue:true,
    			duration:1000,
    			easing:'swing',
    			complete:function (){
    				$('.box').css('background','blue');
    			}
    		});
    	})
    </script>
    </body>
    </html>
    

      

  • 相关阅读:
    前端调用后台接口下载word文档的两种方法
    Layui form表单提交注意事项
    JavaScript_Util_01
    心理
    小例子
    SQL分割字符串
    绘制10种不同颜色的散点图
    绘制散点图
    subplot的使用
    绘制正弦余弦
  • 原文地址:https://www.cnblogs.com/handsomehan/p/5896713.html
Copyright © 2011-2022 走看看