码迷,mamicode.com
首页 > Web开发 > 详细

jQuery基本动画toggle()

时间:2018-07-17 16:32:51      阅读:1574      评论:0      收藏:0      [点我收藏+]

标签:ide   strong   meta   点击   title   hide   动画   语法   pre   

今天来学习一下jQuery的基本函数的使用,很简单。

首先写一个button做控制按钮,然后写一个div用按钮控制idv做动画,从而测试JQuery的动画函数

<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style>
			div{
				width: 100px;
				height: 100px;
				background: #FA8072;
			}
			div.bg{
				background: #0A8CD2;
			}
		</style>
	</head>
	<body>
		<button>按钮</button>
		<div class="box bg red"></div>
	</body>

 接下来就是在script中使用JQuery函数了

<script type="text/javascript">
		$(function(){
			$("button").click(function(){
				$("div").hide();
			})
		})
	</script>

 上面的点击Button就会使div消失。

$("div").show();

使用show()方法的时候 点击button的时候会使div展现

但是jQuery对象.toggle() 语法同show()和hide()一样,而且会很简单,是show()和hide()的互斥方法。

$("div").toggle()

 toggle与show()和hide()互斥,如果是隐藏的就显示如果是显示的就隐藏。

我们还可以给它加个过度

 

jQuery基本动画toggle()

标签:ide   strong   meta   点击   title   hide   动画   语法   pre   

原文地址:https://www.cnblogs.com/chongzixing/p/9323219.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!