王小明的专栏

博客仅作为笔记,如果有错误请评论,或者联系QQ1275801617

jQuery动画效果
$(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; /**切换使用*/
	}


阅读更多

扫码向博主提问

去开通我的Chat快问

wangming520liwei

非学,无以致疑;非问,无以广识
  • 擅长领域:
  • Java开发
  • 大数据
版权声明:本文为博主原创文章,未经博主允许不得转载。http://mp.blog.csdn.net/configure#i https://blog.csdn.net/wangming520liwei/article/details/52370670
个人分类: Html/Js/JSP/CSS/jQuery
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

jQuery动画效果

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭