关闭

JQuery 动画 滑动卷入 淡入淡出

160人阅读 评论(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
	    	});
	    	
	});



0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:138704次
    • 积分:4248
    • 等级:
    • 排名:第7144名
    • 原创:298篇
    • 转载:13篇
    • 译文:0篇
    • 评论:16条
    感谢打赏 支付宝二维码
    支付宝
    微信二维码 欢迎打赏
    微信
    最新评论