王小明的专栏

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

前端学习 jQuery动画 show Hide

前端学习 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');
	    	});
	});




阅读更多

扫码向博主提问

去开通我的Chat快问

wangming520liwei

非学,无以致疑;非问,无以广识
  • 擅长领域:
  • Java开发
  • 大数据
版权声明:本文为博主原创文章,未经博主允许不得转载。http://mp.blog.csdn.net/configure#i https://blog.csdn.net/wangming520liwei/article/details/52367507
上一篇前端开发--TAB标签效果实现
下一篇JQuery 动画 滑动卷入 淡入淡出
想对作者说点什么? 我来说一句

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

关闭
关闭