关闭

前端学习 jQuery动画 show Hide

208人阅读 评论(0) 收藏 举报
分类:

前端学习 jQuery动画   show Hide 



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>
<span style="white-space:pre">	</span><input type="button" class="show"  value="显示"></input>
<span style="white-space:pre">	</span><input type="button" class="hide"  value="隐藏"></input>
<span style="white-space:pre">	</span><input type="button" class="toggle" value="切换"></input>
  <!--<div id= "box" style="width:100px;height:100px;border: 1px solid black;">
  <span style="white-space:pre">	</span><strong>www.baidu.com</strong>
  </div>-->
  <!--不要有空格,否则会有问题-->
  <!--<div  class="test">
  <span style="white-space:pre">	</span>你
  </div>
  <div  class="test">
  <span style="white-space:pre">	</span>好
  </div>
  <div  class="test">
  <span style="white-space:pre">	</span>吗
  </div>
  <div  class="test">
  <span style="white-space:pre">	</span>?
  </div>-->
  <div id="box">
  <span style="white-space:pre">	</span>box</div>


</body>
</html>


CSS:

#box{
	 width:100px;
	 height:100px;
	 background:red;
	/* display:none; /**切换使用*/
	}
	
.test{
	 padding:5px; 
	 margin-right:5px; 
	 background:orange;
	 float:left; 
	 display:none;
	}



JS :

$(function(){
	    //$('#box').hide();
	    // 可以传递参数  数字单位是ms  slow 是600ms fast 200ms normal 400ms
	    /*$('.show').click(function(){
	    	 $('#box').show('slow', function(){
	    	 	    alert("显示完毕!");
	    	 	});
	    	});
	     $('.hide').click(function(){
	    	 $('#box').hide('slow');
	    	});*/
	    	//实现列队动画 参数传递最好使用单引号  不停的嵌套可以实现
	    	/*$('.show').click(function(){
	    		   $('.test').eq(0).show('slow', function(){
	    		   	    $('.test').eq(1).show('slow');//
	    		   	})
	    	});*/
	    	
	    	//递归自调用
	    	/*$('.show').click(function(){
	    		   $('.test').first().show('slow', function  testshow(){
	    		   	    $(this).next().show('slow', testshow);//
	    		   	})
	    	});*/
	    	//show 和hide 组合成同一个按钮
	    	$('.toggle').click(function(){
	    	 $('#box').toggle('slow');
	    	});
	});




0
0
查看评论

jQuery动画效果(show与hide/toggle/slideUp/slideToggle/fadeIn/fadeTo)

1、show()与hide() show()和hide()方法用于显示或隐藏页面中的元素,它的调用格式分别为: $(selector).hide(speed,[callback])和$(selector).show(speed,[callback]) 参数speed设置隐藏或显示时的速度值,可为“s...
  • yeyang123
  • yeyang123
  • 2015-07-29 16:45
  • 2446

jQuery 效果 - 隐藏hide() 和 显示show()动画实例

动画所有跨度(在这种情况下的话)快速隐藏,在200毫秒内完成每个动画。 一旦每个动画完成,它将启动下一个动画。<!doctype html> <html lang="en"> <head> <meta charset="ut...
  • qq_35864642
  • qq_35864642
  • 2017-09-12 11:11
  • 157

JQuery 显示隐藏动画( show(),hide(),toggle() )

$('#div1').show(1000);  //显示。1000毫秒,表示动画显示过程时间。 $('#div1').hide(1000);  //隐藏 $('#div1').toggle(1000);  //合成显示...
  • houyanhua1
  • houyanhua1
  • 2017-12-19 14:33
  • 45

JQuery的可见性选择器与show、hide的关系

1.:hidden选择器 不是指"visibility: hidden",而是指"display: none"。2.:visible选择器不是指"visibility: visible",而是指display属性不是none。即可见性选择器...
  • aitangyong
  • aitangyong
  • 2015-01-29 22:58
  • 2795

jQuery 效果 show() 和 hide()方法

jQuery 效果 - show() 方法 定义和用法 如果被选元素已被隐藏,则显示这些元素: 语法 $(selector).show(speed,callback) 参数 描述 speed 可选。规定元素从隐藏到完...
  • ssisse
  • ssisse
  • 2016-08-25 19:57
  • 691

jquery show hide 显示和隐藏失效/不起作用

今天开发的时候,遇到一个问题,jquery的显示和隐藏,show和hide失效。 代码如下: aaaaa abc $(function(){ $("#gw").hide(); }); 这个js ...
  • duni2011
  • duni2011
  • 2014-03-25 14:15
  • 4823

jQuery中.show()和.hide()和.click()和.toggle()事件

jQuery中.show()和.hide()和.click()和.toggle()事件
  • XA5851477
  • XA5851477
  • 2017-03-30 09:59
  • 989

Jquery如何在链式操作中使用hide(), delay()和show()?

关于delay()的链式操作
  • panzhou_style
  • panzhou_style
  • 2016-02-23 14:03
  • 1391

多个Fragment使用show和hide来切换时的画面重叠的问题

Fragment使用show和hide来切换的时候重叠
  • qq_25462737
  • qq_25462737
  • 2015-01-20 11:39
  • 2056

jQuery-show()与html()及hide()用法 学习笔记四

测试小程序段代码:.....script src="jquery-1.2.6.min.js" type="text/javascript">script>script type="text/javascrip...
  • lansky07
  • lansky07
  • 2008-11-27 16:50
  • 5916
    个人资料
    • 访问:270642次
    • 积分:5906
    • 等级:
    • 排名:第5171名
    • 原创:341篇
    • 转载:13篇
    • 译文:0篇
    • 评论:28条
    感谢打赏 支付宝二维码
    支付宝
    微信公众号 欢迎关注
    微信
    发福利啦 支付宝扫码有红包
    支付宝
    最新评论