jQuery 自定义动画_jquery自定义动画-CSDN博客

本文链接：https://blog.csdn.net/wangming520liwei/article/details/52368876

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();
	   	});
	   	
	   	
	    
	    
	});