JQuery 动画滑动卷入淡入淡出

最新推荐文章于 2024-03-10 18:19:17 发布

wangxiaoming

最新推荐文章于 2024-03-10 18:19:17 发布

阅读量910

点赞数

分类专栏：前端 Html/Js/JSP/CSS/jQuery

本文链接：https://blog.csdn.net/wangming520liwei/article/details/52367867

版权

前端 Html/Js/JSP/CSS/jQuery 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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
	    	});
	    	
	});