关闭

jquery的淡入淡出

420人阅读 评论(0) 收藏 举报
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'deptlist.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link rel="stylesheet" type="text/css" href="css/css1.css">
	<script type="text/javascript" src="jquery-1.6.js"></script>
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript">
		$(document).ready(function(){
			$("#ft").click(function(){
				$("#div1").fadeToggle();
				$("#div2").fadeToggle(2000);
				$("#div3").fadeToggle(2500);
			});
		});
		$(document).ready(function(){
		  $("button").toggle(function(){
			$("body").css("background-color","#426ab3");},
			function(){
			$("body").css("background-color","#1d953f");},
			function(){
			$("body").css("background-color","#c77eb5");}
		  );
		});
		
	</script>
	
	<style>
		#ft{background-color:#deab8a;width:50%;height:5%;color: #fff;text-align:center;font-size: 1.1em;padding-top:5px;cursor: pointer;}
		#div1{width:50%;background-color: #fedcbd;}
		#div2{width:50%;background-color: #fab27b;}
		#div3{width:50%;background-color: #cd9a5b;}
	</style>
  </head>
  
  <body>
	<button>dianji</button>
  	<div id="ft">click here,hidden/show some messages</div>
  	<div id="div1" style="display: none;">many of us have been there:your best friend is in a relationship with someone really unpleasant.Watching how you friend is being treadted badly is heartbreaking.you want to tell your friend that their boyfriend or girlfriend is a jerk and the relationship a mistake.But this could easily hurt you friendship.should you hold your tongue,or speak up?</div>
	<div id="div2" style="display: none;">many of us have been there:your best friend is in a relationship with someone really unpleasant.Watching how you friend is being treadted badly is heartbreaking.you want to tell your friend that their boyfriend or girlfriend is a jerk and the relationship a mistake.But this could easily hurt you friendship.should you hold your tongue,or speak up?</div>
	<div id="div3" style="display: none;">many of us have been there:your best friend is in a relationship with someone really unpleasant.Watching how you friend is being treadted badly is heartbreaking.you want to tell your friend that their boyfriend or girlfriend is a jerk and the relationship a mistake.But this could easily hurt you friendship.should you hold your tongue,or speak up?</div>

  </body>
</html>

点击之后的效果如下图:



不用说这个需要导入jquery包的,如果要测试的话不要忘记哦

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:442次
    • 积分:17
    • 等级:
    • 排名:千里之外
    • 原创:1篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章存档
    阅读排行
    评论排行