jQuery 自定义动画

实战 Java 并发编程
实战为导向,从Java 并发原理出发,并集合开发实践,全面剖析 Java 并发编程。
wangxiaoming

jQuery 自定义动画

 

HTML :

 

<!DOCTYPE HTML>
<html>
<head>
<title>Accordion</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery-1.12.0.min.js"></script>
<script src="demo.js"></script>
<link rel="stylesheet" href="demo.css">
</head>

<body>
	<!--<input type="button" class="up"  value="上"></input>
	<input type="button" class="down"  value="下"></input>
	<input type="button" class="toggle" value="切换"></input>-->
	
	<input type="button" class="button" value="按钮"></input>

 
  <div id="box">
  	box</div>

</body>
</html>

 

 

 

 

 

 

CSS:

 

#box{
	 width:100px;
	 height:100px;
	 background:red;
	 position:absolute;
	/* display:none; /**切换使用*/
	}
	
.test{
	 padding:5px; 
	 margin-right:5px; 
	 background:orange;
	 float:left; 
	 display:none;
	}

 

 

 

 

 

 

JS:

 

$(function(){
	 // 必传参数css  2000ms 执行完毕  固定位置
	   /* $('.button').click(function(){
	      $('#box').animate({
	      	width:'200px',
	      	height:'200px',
	      	background:'orange',
	      	opacity:'0.5', 
	      	fontSize:'50px'
	      },2000 ,function(){
	      	alert("执行完毕");
	      	}); 	
	   });*/
	   
	   //定位位置使用
	   /*$('.button').click(function(){
	   	  $('#box').animate({
	   	  	 left:'300px',
	   	  	 top:'200px'
	   	  	}, 'slow');
	   	});*/
	   	//移动每次加100
	   /*	$('.button').click(function(){
	   	  $('#box').animate({
	   	  	 left:'+=100px'
	   	  	}, 'slow');
	   	});*/
	    //实现列队动画, 回调函数 进行嵌套
	    /*$('.button').click(function(){
	    	$('#box').animate({
	    		left:'+=100px'
	    		},'slow', function(){
	    		 $('#box').animate({
	   	  	 top:'+=100px'
	   	  	  }, 'slow');
	    		});
	    });*/
	    //在同一个元素的基础上使用顺序连缀执行 $('#box').animate({}); $('#box').animate({}); $('#box').animate({});
	   /* $('.button').click(function(){
	   	  $('#box').animate({
	   	  	 left:'+=100px'
	   	  	}, 'slow').animate({top:'+=100px'}).animate({width:'+=100px'});
	   	});*/
	    //同一个的基础上可以实现列队,但是不同的是不列队的, 如果想不同元素也实现列队方式效果必须使用嵌套方式
	    //css不是动画方法,会先执行css里面再执行slideDown 和slideUp(); 如果要实现使用queue
	    $('.button').click(function(){
	   	  //$('#box').slideDown().slideUp().css();
	   	  $('#box').slideUp().slideDown('slow', function(){
	   	  	// 如果要清理列队, 即不再执行后续的连缀方法
	   	  	  // $(this).clearQueue();
	   	  	}).queue(function(){
	   	  	  $(this).css('background','orange');
	   	  	  //如果说还要执行一个方法在下面加next()
	   	  	 // next(); 1.4 版本后才有,可能有些低版本不实现
	   	  	 $(this).dequeue();
	   	  	}).hide();
	   	});
	   	
	   	
	    
	    
	});

 

 

 

 

 

wangxiaoming CSDN认证博客专家 架构 Spring Boot Redis
博客是很好的总结和记录工具,如果有问题,来不及回复,关注微信公众号:程序员开发者社区,获取我的联系方式,向我提问,也可以给我发送邮件,联系 1275801617@qq.com
©️2020 CSDN 皮肤主题: Age of Ai 设计师: meimeiellie 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值