讲给后台程序员看的前端系列教程(60)——jQuery元素的隐藏、显示和切换及其动画效果

Mybatis研习录
笨鸟向东飞
谷哥的小弟

C语言自学完备手册(33篇)

Android多分辨率适配框架

JavaWeb核心技术系列教程

HTML5前端开发实战系列教程

MySQL数据库实操教程(35篇图文版)

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境,踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)


版权声明

  • 本文原创作者:谷哥的小弟
  • 作者博客地址:http://blog.csdn.net/lfdfhl

概述

在jQuery框架中可便捷地以动画形式隐藏和显示以及切换元素,常用方式有如下三种:默认方式、滑动方式、淡入淡出方式。

默认方式隐藏和显示以及切换元素

show([speed,[easing],[fn]])
hide([speed,[easing],[fn]])
toggle([speed],[easing],[fn])

滑动方式隐藏和显示以及切换元素

slideDown([speed],[easing],[fn])
slideUp([speed,[easing],[fn]])
slideToggle([speed],[easing],[fn])

淡入淡出方式隐藏和显示以及切换元素

fadeIn([speed],[easing],[fn])
fadeOut([speed],[easing],[fn])
fadeToggle([speed,[easing],[fn]])

参数详解

  • speed:该参数表示动画的速度。可使用其三个预定义的值slow、normal、fast,也可使用具体数值(单位:毫秒)
  • easing:该参数用于指定切换效果,默认值swing也可使用linear。swing表示动画执行时效果是先慢后快再慢,linear表示匀速执行动画。
  • fn:该参数表示动画执行结束时的回调函数。

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jQuery元素的隐藏、显示和切换及其动画效果</title>
		<!--引入jquery文件 -->
		<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			div {
				width: 200px;
				height: 200px;
				background: yellowgreen;
				border: #000 1px solid;
				float: left;
				font-size: 20px;
				font-family: Roman;
			}
		</style>

		<script type="text/javascript">
			$(function() {
				//默认方式隐藏和显示以及切换元素
				$("#firstButton").click(function() {
					$("#divID").hide("slow", "swing", function() {
						console.log("hide");
					});
				});
				$("#secondButton").click(function() {
					$("#divID").show("slow", "swing", function() {
						console.log("show");
					});
				});
				$("#thirdButton").click(function() {
					$("#divID").toggle("slow", "swing", function() {
						console.log("toggle");
					});
				});
				//滑动方式隐藏和显示以及切换元素
				$("#fourthButton").click(function() {
					$("#divID").slideUp("slow", "swing", function() {
						console.log("hide");
					});
				});
				$("#fifthButton").click(function() {
					$("#divID").slideDown("slow", "swing", function() {
						console.log("show");
					});
				});
				$("#sixthButton").click(function() {
					$("#divID").slideToggle("slow", "swing", function() {
						console.log("toggle");
					});
				});
				//淡入淡出方式隐藏和显示以及切换元素
				$("#seventhButton").click(function() {
					$("#divID").fadeOut("slow", "swing", function() {
						console.log("hide");
					});
				});
				$("#eighthButton").click(function() {
					$("#divID").fadeIn("slow", "swing", function() {
						console.log("show");
					});
				});
				$("#ninthButton").click(function() {
					$("#divID").fadeToggle("slow", "swing", function() {
						console.log("toggle");
					});
				});
			});
		</script>
	</head>
	<body>
		<h2 id="author" style="color: red;">本文作者:谷哥的小弟</h2>
		<h2 id="blog" style="color: red;">博客地址:http://blog.csdn.net/lfdfhl</h2>

		<input type="button" value="以默认方式隐藏元素" id="firstButton" />
		<input type="button" value="以默认方式显示元素" id="secondButton" />
		<input type="button" value="以默认方式切换元素" id="thirdButton" />
		<br /><br />
		<input type="button" value="以滑动方式隐藏元素" id="fourthButton" />
		<input type="button" value="以滑动方式显示元素" id="fifthButton" />
		<input type="button" value="以滑动方式切换元素" id="sixthButton" />
		<br /><br />
		<input type="button" value="以淡入淡出方式隐藏元素" id="seventhButton" />
		<input type="button" value="以淡入淡出方式显示元素" id="eighthButton" />
		<input type="button" value="以淡入淡出方式切换元素" id="ninthButton" />
		<br /><br />

		<div id="divID">
			This is div
		</div>

	</body>
</html>

在这里插入图片描述

展开阅读全文

使用AJAX引入页面元素,或者只是隐藏显示它们是否更有效?

09-26
<div class="post-text" itemprop="text"> <p>In web development (jQuery more specifically) am I better off "pre-loading" my page before hand and just use jQuery to manipulate the DOM or the other way around.</p> <p>It is a question of the following:</p> <pre><code><div id="item1"></div> <div id="item2"></div> <div id="element><!-- AJAX --></div> $("#item1").click(function(e) { $("#element").load("ajax/response/containing/HTML_1.php"); }); $("#item2").click(function(e) { $("#element").load("ajax/response/containing/HTML_2.php"); }); . . . </code></pre> <p>versus</p> <pre><code><div id="item1"></div> <div id="item2"></div> <div id="element> <div id="item1_content" style="display:none"><? include('/path/to/html_1'); ?></div> <div id="item2_content" style="display:none"><? include('/path/to/html_2'); ?></div> </div> $("#item1").click(function(e) { $("#item1_content").show(); $("#item2_content").hide(); //Possibly do an AJAX call that simply returns JSON data and do something with it }); $("#item2").click(function(e) { $("#item2_content").show(); $("#item1_content").hide(); //Possibly do an AJAX call that simply returns JSON data and do something with it }); . . . </code></pre> <p>I find the second method to be more elegant since the backend only returns JSON data which the front-end manipulates. With the first method the PHP scripts have to actually return HTML.</p> <p>I would think the first method would hammer on the server harder since simple things such as displaying a dialog would require an AJAX call (even if it didn't need one because all the content is included in method 2).</p> <p>The second method seems like it would hammer on the client harder since I am doing all my data manipulation in JS. The first method however dumps the HTML responses into the divs and reformats the DOM so I am not sure if it's just as intense.</p> <p>What about the impact of load times? The first method has to essentially render a giant document containing elements that may never be shown but with a single request, The second method has to make a million requests but results in a smaller DOM.</p> </div>
©️2020 CSDN 皮肤主题: 精致技术 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值