jquery的淡入淡出

原创 2013年12月04日 14:13:45
<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包的,如果要测试的话不要忘记哦

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

jQuery淡入淡出对话框

  • 2016-05-11 23:40
  • 27KB
  • 下载

jQuery实现窗口的淡入淡出效果

在很多网页中都可以看到网页弹出的一个窗口,然后很多情况下面还会有淡入淡出的效果,下面我们就这个窗口的 淡入淡出效果来做一个例子,这个是使用jQuery来做的,其实非常简单。 首先看HTML代码 ...

jquery 左右淡入淡出滑动

  • 2012-11-14 13:01
  • 42KB
  • 下载

jQuery淡入淡出瀑布流效果

  • 2015-01-13 09:25
  • 555KB
  • 下载

jQuery学习笔记-----------(显示、淡入淡出、滑动、动画、callback、链接)

关于jQuery学习笔记的参考网站是:http://www.runoob.com/jquery/jquery-tutorial.html jQuery 效果- 隐藏和显示 通过 jQuery...

jQuery实现淡入淡出效果

【jQuery】使用JQ来编写面板的淡入淡出效果

本文与上一篇的《【jQuery】使用JQ来编写最基本的淡入淡出效果》(点击打开链接)为姊妹篇, 但上一篇只是对文本的基本控制,本篇则是对面板元素进行控制。 虽然功能上非常类似,但是所用到的控制函数是...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)