关闭

jQuery动画效果

90人阅读 评论(0) 收藏 举报
分类:
$(function(){
	   /*$('.button').click(function(){
	   		 $('#box').animate({
	   		 	  left:'+=300px'
	   		 	}, 3000);
	   	});*/
	   	// stop()停止 不带任何参数只是停止第一个列队动画,接下来的列队会自动执行完
	   	$('.stop').click(function(){
	   		 $('#box').stop(true);//带参数 第一个true 是停止当前队列,并且清除,接下来的对列 //第二个true 停止后会跳到最后的位置上默认值为false
	   	});
	   	/*$('.button').click(function(){
	   		 $('#box').animate({
	   		 	  left:'+=300px'
	   		 	}).animate({top:'+=300px'}).delay(3000);
	   	});*/
	   	//不停的调用自己
	   	$('#box').slideToggle('slow',function(){
	   			 $(this).slideToggle('show', arguments.callee);
	    });
	   	$('.ani').click(function(){
	   		   //$('#box').css('background','orange');
	   		   $(':animated').css('background','orange');
	   		});
	   		$.fx.interval = 200;
	   	$('.button').click(function(){
	   		 $('#pox').toggle(3000, arguments.callee);
	   	});
	   	
	});




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>
	<input type="button" class="stop" value="停止"></input>
	<input type="button" class="ani" value="正在执行的运动"></input>
 
  <div id="box">
  	box</div>
  <div id="pox">
  	pox</div>

</body>
</html>

CSS:


#box{
	 width:100px;
	 height:100px;
	 background:red;
	/* display:none; /**切换使用*/
	}

#pox{
	 width:100px;
	 height:100px;
	 background:green;
	/* display:none; /**切换使用*/
	}


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:138899次
    • 积分:4248
    • 等级:
    • 排名:第7144名
    • 原创:298篇
    • 转载:13篇
    • 译文:0篇
    • 评论:16条
    感谢打赏 支付宝二维码
    支付宝
    微信二维码 欢迎打赏
    微信
    最新评论