王小明的专栏

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

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="in"  value="淡入"></input>
	<input type="button" class="out"  value="淡出"></input>
	<input type="button" class="toggle" value="切换"></input>
		<input type="button" class="to" value="透明度到多少"></input>
 
  <div id="box">
  	box</div>

</body>
</html>
CSS:

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


JS:

$(function(){
	
				/*$('.up').click(function(){
	    	 $('#box').slideUp('slow');
	    	});
	    	$('.down').click(function(){
	    	 $('#box').slideDown('slow');
	    	});
	    	$('.toggle').click(function(){
	    	 $('#box').toggle('slow');
	    	});*/
	    	//淡入淡出、fadIn fadeOut fadeToggle fadeTo
	    	$('.out').click(function(){
	    	 $('#box').fadeOut('slow');
	    	});
	    	$('.in').click(function(){
	    	 $('#box').fadeIn('slow');
	    	});
	    	$('.toggle').click(function(){
	    	 $('#box').fadeToggle('slow');
	    	});
	    	$('.to').click(function(){
	    	 $('#box').fadeTo('slow', 0.33);//透明度到0.33
	    	});
	    	
	});



阅读更多

扫码向博主提问

去开通我的Chat快问

wangming520liwei

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

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

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