jQuery入门（6） 淡入淡出效果2013-05-22 引路蜂移动软件 jQuery 提供了下面几种方法可以实现显示的淡入淡出效果：fadeIn（）fadeOut（）fadeToggle（）fadeTo（）fadeIn（）方法fadeIn（） 实现淡入效果，其基本语法如下 ：$（selector）.fadeIn（speed,callback）;可选参数speed给出了淡入效果的时间，可以 使用 “slow”,”fast” 或是数值（微秒）第二个可选参数为回调函数，在fadeIn（）方法结束后调 用。
$（"button"）.click（function（）{ $（"#center1"）.fadeIn（）; $（"#center2"）.fadeIn（"slow"）; $（"#center3"）.fadeIn（3000）; }）;fadeOut（）方法fadeOut（） 实现淡出效果，其基本语法如下：$（selector）.fadeOut（speed,callback）;可选参数speed给出了淡入效果的时间，可以 使用 “slow”,”fast” 或是数值（微秒）第二个可选参数为回调函数，在fadeIn（）方法结束后调 用。
$（"button"）.click（function（）{ $（"#center1"）.fadeOut（）; $（"#center2"）.fadeOut（"slow"）; $（"#center3"）.fadeOut（3000）; }）;fadeToggle（）方法fadeToggle（） 交替进行fadeIn（）和fadeOut（），如果元素是淡 出的，那么fadeToggle（）将淡入该元素，如果之前是淡入的，fadeToggle将淡出该元素。其基本语 法如下：$（selector）.fadeToggle（speed,callback）;可选参数speed给出了淡入效果的 时间，可以使用 “slow”,”fast” 或是数值（微秒）第二个可选参数为回调函数，在fadeIn（）方 法结束后调用。下面例子，点击按钮之后，可以交替淡出淡入三个矩形。
<！DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JQuery Demo</title> <script src="scripts/jquery-1.9.1.js"></script> <script> $（document）.ready（function （） { $（"button"）.click（function （） { $（"#center1"）.fadeToggle（）; $（"#center2"）.fadeToggle（"slow"）; $（"#center3"）.fadeToggle（3000）; }）; }）; </script> </head> <body><p>Demonstrate fadeToggle（） with different speed parameters.</p> <button>Click to fade in/out boxes</button> <br> <br><center id="center1" style="width: 80px; height: 80px; background-color: red;"></center> <br> <center id="center2" style="width: 80px; height: 80px; background-color: green;"></center> <br> <center id="center3" style="width: 80px; height: 80px;background-color: blue;"></center></body> </html> 
易网时代-编程资源站