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

Jquery中淡入淡出效果fadeIn()、fadeOut()、fadeToggle()、fadeTo()学习引发的思考----关于Jquery函数传参数

时间:2014-10-24 16:28:47      阅读:274      评论:0      收藏:0      [点我收藏+]

标签:jquery   javascript   函数重载   js   

一、基本语法

1、fadeIn淡入、fadeOut淡出、fadeToggle淡入淡出切换(已经淡出点击淡入,或者相反):

$(selector).fadeIn(duration,complete);
$(selector).fadeOut(duration,complete);
$(selector).fadeToggle(duration,complete);

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"(200ms)、"fast"(600ms) 或毫秒。【默认为400ms】

可选的 callback 参数是 fading 完成后所执行的函数名称。

2、fadeTo:jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。

$(selector).fadeTo(speed,opacity,callback);

必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。

可选的 callback 参数是该函数完成后所执行的函数名称。

二、使用方法

1、内联调用(匿名函数)

<!DOCTYPE html>
<html>
<head>
	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
    
	<script>
		$(document).ready(function(){
		    $("button").click(function(){
			    $("#div1").fadeIn();
			    $("#div2").fadeIn("slow");
			    $("#div3").fadeIn(3000);
		    });
		});
	</script>
</head>

<body>
	<p>演示带有不同参数的 fadeIn() 方法。</p>
	<button>点击这里,使三个矩形淡入</button>
	<br><br>
	<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
	<br>
	<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
	<br>
	<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>

即直接在callback处写函数。

2、外部调用

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
    
	<script type="text/javascript">
	    function myFunc(){
	        document.getElementById("pp").innerHTML = "sdad";
	    };

		$(document).ready(function(){
		    $("button").click(function(){
		        $("#div1").fadeIn("slow");
		        $("#div2").fadeIn("fast");
                $("#div3").fadeIn(3000, myFunc);
		    });
		});
	</script>
</head>

<body>
	<p>演示带有不同参数的 fadeIn() 方法。</p>

	<p id="pp">Testing</p>
	<button>点击这里,使三个矩形淡入</button>
	<br><br>
	<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
	<br>
	<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
	<br>
	<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>

三、新API

点击参考 新API参数有三个,而callback(complete)参数是最后一个,那么为什么可以正确执行呢?

这是JS特性之一,以前没见过这样的函数调用,而且发现我根本没有把myFunc函数传递给Jquery函数!这必须深究一下,So JS函数到底是怎么回事?

四、JS函数重载

有过C系列语言学习经历的都知道,函数传递参数都会进行一致性检查,你传递多少个参数,参数的类型都会检查。但是由上面的例子可以看出,javascript却没有这样的一致性检查!多传、少传好像他都能接受。验证过后确定确实是这样的,传递很多个参数都可以。

还有一个问题是好像间隔传递都行?!这就很奇葩了,那么原因是什么呢?想了很久也没想明白!查看源码,发现很多jQuery.extend方法,那么确定了:原因是函数重载。但是我们注意到JS和C++的不同,C++会有参数检查,多了不行,所以可以直接定义多个参数类型或者个数不同的同名函数实现重载,JS却不管你有多少,只管前面的有效参数。那么怎么实现JS的函数重载?有很多方法!

1、利用arguments实现;

2、利用typeof进行参数类型判断;

但是这两种方法有很大的局限性,要是处理的参数很多,重载逻辑岂不是很复杂!?那么有没有好的方法呢?

最终发现暂时还没有极好的方法,但是看到几篇还不错的文章

让 JavaScript 轻松支持函数重载

http://vilic.info/blog/archives/tag/%E5%87%BD%E6%95%B0%E9%87%8D%E8%BD%BD


本文由@The_Third_Wave(Blog地址:http://blog.csdn.net/zhanh1218)整理。还有未涉及的,会不定期更新,有错误请指正。

如果你看到这篇博文时发现不完整,那是我为防止爬虫先发布一半的原因,请看原作者Blog。

如果这篇博文对您有帮助,为了好的网络环境,不建议转载,建议收藏!如果您一定要转载,请带上后缀和本文地址。

Jquery中淡入淡出效果fadeIn()、fadeOut()、fadeToggle()、fadeTo()学习引发的思考----关于Jquery函数传参数

标签:jquery   javascript   函数重载   js   

原文地址:http://blog.csdn.net/zhanh1218/article/details/40423409

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