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实现淡入淡出

#image{ width: 100%; height: 100%; position: absolute; z-index: 10; } body{ margi...
  • LQW_java_home
  • LQW_java_home
  • 2017年07月06日 13:46
  • 297

jquery 实现淡入淡出图片轮播效果

1.HTML 框架搭建(css代码里宽高的大小与图片的大小一致) ...
  • u013993319
  • u013993319
  • 2016年07月13日 15:23
  • 6941

jQuery -- 内容的淡入与淡出

本篇文章讲述了jQuery中文字或图形的淡入与淡出的动画效果,根据官方的API分为四个部分。 第一部分:show/hide/toggle会出现五个滑块,点击后,内容会逐渐消失在左上角,有位移浮动。 h...
  • RedGuy_anluo
  • RedGuy_anluo
  • 2016年05月10日 22:40
  • 1923

jQuery动画-淡入和淡出

hide()、show()、slideDown()、slideUp()是通过 display:none/block来实现的;fadeOut() 是通过透明度的方法,opacity=0,这个动画只调整元...
  • QQ80583600
  • QQ80583600
  • 2017年01月13日 13:05
  • 1119

jQuery 淡入淡出、滑动和动画

一、淡入淡出 1、jQuery fadeIn() 方法   jQuery fadeIn() 用于淡入已隐藏的元素。        语法:$(selector).fadeIn(speed,call...
  • qq_27626333
  • qq_27626333
  • 2016年07月16日 23:09
  • 6101

JQUERY常用效果简单实现方法淡入淡出,隐藏等

淡入淡出 $(document).ready(function(){     $("button").click(function(){         $("#div1").fad...
  • riuhazen
  • riuhazen
  • 2017年12月13日 19:45
  • 79

JQuery:多张图片的淡入淡出效果。

我们要实现一个这样子的一个动画:多张图片在相同的位置淡入淡出,实现图片的轮流展示。具体实现的思路: 使用定时器setInterval方法,setInterval(,时间延时)。  根据时间延时循环地...
  • superSmart_Dong
  • superSmart_Dong
  • 2017年06月23日 11:34
  • 877

Jquery之淡入淡出及背景颜色深浅调整效果

Jquery提供了淡入淡出的效果,我们直接拿来用就可以了:fadeIn淡入、fadeOut淡出、fadeTo透明度调整、fadeToggle淡入淡出混合效果。 HTML与Jquery代码 ...
  • boonyaxnn
  • boonyaxnn
  • 2016年09月22日 22:12
  • 827

Jquery和纯JS实现轮播图(二)--淡入淡出切换式

Jquery和纯JS实现轮播图(二)--淡入淡出切换式
  • m0_38099607
  • m0_38099607
  • 2017年05月16日 10:44
  • 983

基于jQuery淡入淡出,鼠标移入停止效果

图片淡入淡出,轮播切换,鼠标移入停止,移出继续开始效果; 有时候我们需要进行图片展示(例如广告),图片多的情况下,需要循环播放,但是又不希望出现轮播图的效果. 这时候就用到了淡入淡出的效果; 代...
  • shijue98
  • shijue98
  • 2016年11月11日 15:17
  • 347
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery的淡入淡出
举报原因:
原因补充:

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