关闭

JQuery 动画 滑动卷入 淡入淡出

373人阅读 评论(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
查看评论

Java Web 开发遇到的坑和注意点 涉及Jquery,Servlet等等

1.如果前端页面中使用表单的action和method的方式提交请求到后台的servlet,则在servlet处理完请求后,使用RequestDiapatcher.forward()或则Response.sendRediret()方法都可以实现跳转页面。但是请注意,如果前端页面中使用ajax的方式提...
  • zhouhuakang
  • zhouhuakang
  • 2016-06-25 11:46
  • 1106

jQuery 淡入淡出、滑动和动画

一、淡入淡出 1、jQuery fadeIn() 方法   jQuery fadeIn() 用于淡入已隐藏的元素。        语法:$(selector).fadeIn(speed,callback);   可选的 speed ...
  • qq_27626333
  • qq_27626333
  • 2016-07-16 23:09
  • 6098

jQuery——动画篇(隐藏显示、上卷下拉、淡入淡出、animate、stop、each)

jQuery——动画篇(隐藏显示、上卷下拉、淡入淡出、animate、stop、each 、inArray、get、index)
  • anfangw
  • anfangw
  • 2016-12-16 16:47
  • 3386

jQuery实现淡入淡出效果

  • 2016-12-15 14:47
  • 3KB
  • 下载

jQuery效果(二)——淡入淡出

jQuery fadeIn()方法:用于淡入已隐藏的元素 jQuery fadeOut()方法:用于淡出可见的元素 $(document).ready(function(){ $("button").click(function(){ $(&quo...
  • furway
  • furway
  • 2016-07-14 10:31
  • 203

jQuery动画---显示、卷动、淡入淡出

显示和隐藏show()/hide() 显示和隐藏动画显示可以加时间参数,标志显示或者隐藏的快慢,单位为毫秒。还有三个预设的速度:slow、normal 和 fast,分别对应 600 毫秒、400 毫秒和 200 毫秒。 如果传递的时间不符合格式要求或者为空字符串,那个将采用normal$(&qu...
  • twilight_karl
  • twilight_karl
  • 2017-06-16 16:48
  • 282

jQuery动画-淡入和淡出

hide()、show()、slideDown()、slideUp()是通过 display:none/block来实现的;fadeOut() 是通过透明度的方法,opacity=0,这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。
  • QQ80583600
  • QQ80583600
  • 2017-01-13 13:05
  • 1117

jQuery 效果 - 淡入淡出

程序员java小白学习 2017-02-05 17:43 通过 jQuery,您可以实现元素的淡入淡出效果。 点击展示 淡入/淡出 面板 实例 jQuery fadeIn() 演示 jQuery fadeIn() 方法。 jQuery fadeOut() 演示 jQuery...
  • u011277123
  • u011277123
  • 2017-03-14 10:17
  • 134

jquery的淡入淡出效果

jquery中使用fadeOut() 实现淡出效果,隐藏一个元素;使用fadeIn()实现淡入效果,现实一个元素:<html> <head> <script type="text/javascript" src="/jquery/jquer...
  • dongdong9223
  • dongdong9223
  • 2016-02-01 14:04
  • 989

jQuery来了--效果--隐藏和显示,淡入淡出,滑动

隐藏和显示hide()和show()hide()作用:隐藏HTML元素 (相当于CSS中 display:none;)show()作用:显示HTML元素 (相当于CSS中 display:block;)语法: 隐藏:$("selector").hide(speed,call...
  • panlu666_pl
  • panlu666_pl
  • 2017-04-28 17:03
  • 322
    个人资料
    • 访问:266839次
    • 积分:5861
    • 等级:
    • 排名:第5206名
    • 原创:341篇
    • 转载:13篇
    • 译文:0篇
    • 评论:28条
    感谢打赏 支付宝二维码
    支付宝
    微信公众号 欢迎关注
    微信
    发福利啦 支付宝扫码有红包
    支付宝
    最新评论