关闭

前端学习 jQuery动画 show Hide

118人阅读 评论(0) 收藏 举报
分类:

前端学习 jQuery动画   show Hide 



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>
<span style="white-space:pre">	</span><input type="button" class="show"  value="显示"></input>
<span style="white-space:pre">	</span><input type="button" class="hide"  value="隐藏"></input>
<span style="white-space:pre">	</span><input type="button" class="toggle" value="切换"></input>
  <!--<div id= "box" style="width:100px;height:100px;border: 1px solid black;">
  <span style="white-space:pre">	</span><strong>www.baidu.com</strong>
  </div>-->
  <!--不要有空格,否则会有问题-->
  <!--<div  class="test">
  <span style="white-space:pre">	</span>你
  </div>
  <div  class="test">
  <span style="white-space:pre">	</span>好
  </div>
  <div  class="test">
  <span style="white-space:pre">	</span>吗
  </div>
  <div  class="test">
  <span style="white-space:pre">	</span>?
  </div>-->
  <div id="box">
  <span style="white-space:pre">	</span>box</div>


</body>
</html>


CSS:

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



JS :

$(function(){
	    //$('#box').hide();
	    // 可以传递参数  数字单位是ms  slow 是600ms fast 200ms normal 400ms
	    /*$('.show').click(function(){
	    	 $('#box').show('slow', function(){
	    	 	    alert("显示完毕!");
	    	 	});
	    	});
	     $('.hide').click(function(){
	    	 $('#box').hide('slow');
	    	});*/
	    	//实现列队动画 参数传递最好使用单引号  不停的嵌套可以实现
	    	/*$('.show').click(function(){
	    		   $('.test').eq(0).show('slow', function(){
	    		   	    $('.test').eq(1).show('slow');//
	    		   	})
	    	});*/
	    	
	    	//递归自调用
	    	/*$('.show').click(function(){
	    		   $('.test').first().show('slow', function  testshow(){
	    		   	    $(this).next().show('slow', testshow);//
	    		   	})
	    	});*/
	    	//show 和hide 组合成同一个按钮
	    	$('.toggle').click(function(){
	    	 $('#box').toggle('slow');
	    	});
	});




0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:195199次
    • 积分:5075
    • 等级:
    • 排名:第6139名
    • 原创:329篇
    • 转载:13篇
    • 译文:0篇
    • 评论:22条
    感谢打赏 支付宝二维码
    支付宝
    微信公众号 欢迎关注
    微信
    发福利啦 支付宝扫码有红包
    支付宝
    最新评论