jQuery 中淡入淡出效果fadeIn、fadeOut、fadeTo的用法
jQuery Fading 方法
通過 jQuery，您可以實(shí)現(xiàn)元素的淡入淡出效果。
jQuery 擁有下面四種 fade 方法：
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
jQuery fadeIn() 方法
jQuery fadeIn() 用于淡入已隱藏的元素。
語法：
可選的 speed 參數(shù)規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。$(selector).fadeIn(speed,callback);
可選的 callback 參數(shù)是 fading 完成后所執(zhí)行的函數(shù)名稱。
下面的例子演示了帶有不同參數(shù)的 fadeIn() 方法：
實(shí)例
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
jQuery fadeOut() 方法
jQuery fadeOut() 方法用于淡出可見元素。
語法：
可選的 speed 參數(shù)規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。$(selector).fadeOut(speed,callback);
可選的 callback 參數(shù)是 fading 完成后所執(zhí)行的函數(shù)名稱。
下面的例子演示了帶有不同參數(shù)的 fadeOut() 方法：
實(shí)例
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進(jìn)行切換。
如果元素已淡出，則 fadeToggle() 會向元素添加淡入效果。
如果元素已淡入，則 fadeToggle() 會向元素添加淡出效果。
語法：
可選的 speed 參數(shù)規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。$(selector).fadeToggle(speed,callback);
可選的 callback 參數(shù)是 fading 完成后所執(zhí)行的函數(shù)名稱。
下面的例子演示了帶有不同參數(shù)的 fadeToggle() 方法：
實(shí)例
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
jQuery fadeTo() 方法
jQuery fadeTo() 方法允許漸變?yōu)榻o定的不透明度（值介于 0 與 1 之間）。
語法：
必需的 speed 參數(shù)規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。$(selector).fadeTo(speed,opacity,callback);
fadeTo() 方法中必需的 opacity 參數(shù)將淡入淡出效果設(shè)置為給定的不透明度（值介于 0 與 1 之間）。
可選的 callback 參數(shù)是該函數(shù)完成后所執(zhí)行的函數(shù)名稱。
下面的例子演示了帶有不同參數(shù)的 fadeTo() 方法：
實(shí)例
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
<head>
<title></title>
<style type="text/css">
#img1
{
width:400px;
height
:500px;
}
</style>
<script src="
jquery
-1.9.1.js" type="text/
javascript
"></script>
<script type="text/javascript">
$(function () {
$('#Button1').bind('click', function () {
$('img').fadeOut(2000, function () {
$('#Button1').val('哎，沒了'); //
圖片
的消失
});
})
$('#Button2').bind('click', function () {
$('img').fadeIn(2000, function () {
$('#Button2').val('有了'); //圖片的呈現(xiàn)
});
})
$('#Button3').bind('click', function () {
$('img').fadeTo(2000, 0.3, function () {
alert('
動畫
執(zhí)行完畢'); //圖片透明度
});
})
$('#Select1').bind('change', function () { //可以是change或者是click
事件
$('img').fadeTo(1000, $('#Select1 option:selected').val());
})
})
</script>
</head>
<body>
<img src="images/1.jpg" id="img1" />
<input id="Button1" type="button" value="button" />
<input id="Button2" type="button" value="button" />
<input id="Button3" type="button" value="button" />
<select id="Select1">
<option>1</option>
<option>0.1</option>
<option>0.2</option>
<option>0.3</option>
<option>0.4</option>
<option>0.5</option>
<option>0.6</option>
<option>0.7</option>
<option>0.8</option>
<option>0.9</option>
<option>0</option>
</select>
</body>
jquery 如何判斷是否已經(jīng)fadein/fadeout? 判斷是否隱藏hide()/show()
首先判斷是否hide和show可以用
$('#header').is(":hidden");
不過對于fadein fadeout不好使，方法就是定義一個變量，然后在回調(diào)函數(shù)里面賦值，看代碼：
$(document).ready(function() {
var headerfade = 0; // 表頭是否已經(jīng)隱藏
'afterLoad': function(anchorLink, index){ // index從1開始
if(index != 1){
if(headerfade == 0 ){
$('#header').fadeOut(500,function(){headerfade=1;}); // 二頁隱藏菜單
}
}else{
if(headerfade == 1 ){
$('#header').fadeIn(1000,function(){headerfade=0;});
}
}
}
}
看到?jīng)]，定義一個變量headerfade然后用之前判斷就OK啦，其他同樣道理！
hide和fadeOut 顯示效果有什么區(qū)別？ show和fadeIn顯示效果都一樣？
很多朋友在學(xué)習(xí)jQuery的時候 會遇到這個問題 ，hide和 fadeOut都可以帶有參數(shù)：
$(selector).hide(speed,callback);
$(selector).fadeOut(speed,callback);
首先我們從名字上就可以看出 hide是隱藏而fadeOut是淡出，當(dāng)然名字不能看出具體的區(qū)別，只能體現(xiàn)他們是不同的而已。但是當(dāng)我們把參數(shù) speed 設(shè)置稍微長一些就可以看出區(qū)別了。并且實(shí)現(xiàn)的效果顯示起來都差不多，所以被誤以為是一樣的，其實(shí)不然。
讓我們寫下如下代碼：
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button.dl").click(function(){
$("#div1").fadeOut(3000);
});
});
$(document).ready(function(){
$("button.dll").click(function(){
$("#div2").hide(3000);
});
});
</script>
</head>
<body>
<p>演示帶有不同參數(shù)的 fadeOut() 方法。</p>
<button class="dl">點(diǎn)擊這里，使紅色矩形1淡出(fadeOut)</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br><br>
<button class="dll">點(diǎn)擊這里，使紅色矩形2隱藏(hide)</button>
<br><br>
<div id="div2" style="width:80px;height:80px;background-color:red;"></div>
</body>
</html>
好了 現(xiàn)在我們可以測試下了，怎么樣區(qū)別一目了然吧。
沒錯，hide隱藏的效果是從下至上或從右下到左上的慢慢折疊縮小，而fadeOut的淡出效果是整體淡化直至消失。好了 現(xiàn)在我們可以測試下了，怎么樣區(qū)別一目了然吧。
同理 show和fadeIn也是這樣的區(qū)別，大家自己改下代碼試下吧。
IE下 jquery的fadeIn與fadeOut方法失效的BUG
BUG1:絕對定位嵌套絕對定位
這個問題遇到過好多次，因?yàn)闆]有做筆記，所以每次遇到這個問題都要研究半天。好記性不如爛筆頭，這話一點(diǎn)沒錯。
<div id="show_list">
<div class="" val="0">
<div class=" posab" style="top:50px; left:260px;"> <img class="png_bg" src="/uploads/productimage/164613_634717302959421250.png" /></div>
<div class="posab alce" style="top:200px; width:260px; left:80px;">
<p class=" f18 l22 alce" style="color:#e99417; margin-top:20px;">測試測試測試</p>
<p class=" f14 l22 alce" style="color:#e99417;">測試測試測試</p>
<p class="lk444 f14 l22 alce" style="margin-top:5px;">測試測試測試</p>
</div>
</div>
<div class="" val="0">
<div class=" posab" style="top:50px; left:260px;"> <img class="png_bg" src="/uploads/productimage/164613_634717302959421250.png" /></div>
<div class="posab alce" style="top:200px; width:260px; left:80px;">
<p class=" f18 l22 alce" style="color:#e99417; margin-top:20px;">測試測試測試</p>
<p class=" f14 l22 alce" style="color:#e99417;">測試測試測試</p>
<p class="lk444 f14 l22 alce" style="margin-top:5px;">測試測試測試</p>
</div>
</div>
<div>
posab 是絕對定位的class
只要把絕對定位換成浮動，就可以實(shí)現(xiàn)淡隱淡出的效果了。
<div id="show_list">
<div class="posab" val="0">
<div class="" style="margin-top:50px; float:left; margin-left:260px"> <img class="png_bg" src="/uploads/productimage/164613_634717302959421250.png" /></div>
<div class="alce" style="margin-top:-200px; width:260px; margin-left:80px; float:left">
<p class=" f18 l22 alce" style="color:#e99417; margin-top:20px;">測試測試測試</p>
<p class=" f14 l22 alce" style="color:#e99417;">測試測試測試</p>
<p class="lk444 f14 l22 alce" style="margin-top:5px;">測試測試測試</p>
</div>
</div>
<div class="posab" val="0">
<div class="" style="margin-top:50px; margin-left:260px;"> <img class="png_bg" src="/uploads/productimage/164613_634717302959421250.png" /></div>
<div class="alce" style="margin-top:-200px; width:260px; margin-left:80px;float:left">
<p class=" f18 l22 alce" style="color:#e99417; margin-top:20px;float:left">測試測試測試</p>
<p class=" f14 l22 alce" style="color:#e99417;">測試測試測試</p>
<p class="lk444 f14 l22 alce" style="margin-top:5px;">測試測試測試</p>
</div>
</div>
<div>
具體的位置需要做一些調(diào)整
BUG2：父級絕對定位嵌套大于父級尺寸的圖片
還有一種情況，是IE8獨(dú)有的BUG，格式如下
<div class=" posab" style=" top:80px; left:260px;width:550px;height:55px">
<img class="png_bg" src="image.jpg" />
</div>
如果圖片的大小超過了div的大小，在IE8下面淡隱淡出效果將會失效
BUG3:
網(wǎng)上還差了一種bug，具體沒有遇到過，現(xiàn)也貼上：
IE6 IE7 IE8 在 position : relative 時fadeIn() fadeOut() bug 解決方案
先看一個例子
<div class="fadein">
<div>
<div>I am going to fade in ;</div>
<div>I am going to fade in ;</div>
</div>
</div>
$('.fadein').fadeIn();
以上代碼基本上在所有主流瀏覽器都可以達(dá)到預(yù)期效果
但是現(xiàn)實(shí)是殘酷的， 大家的html結(jié)構(gòu)當(dāng)然不會這么簡單。
我們再加一點(diǎn)東東
<style>
.relative{position: relative;}
</style>
<div class="fadein">
<div class="relative">
<div>I am going to fade in ;</div>
<div>I am going to fade in ;</div>
</div>
</div>
$('.fadein').fadeIn();
這個時候在IE 6 78 就會吭爹的事情出現(xiàn)， 動畫不出現(xiàn)有木有! 直接show出來有木有！
這是臭名昭著的 IE 大bug： 如果fadeIn的元素的子元素有position屬性時 以relative值為最嚴(yán)重 有position屬性的元素不會出現(xiàn)fadeIn的效果！
可能的曲線解決方法：
1， 不用position: relative; 這個嘛 有時候可以做到
2，如果1實(shí)在做不到， 比如筆者遇到的情況，那就用each()。 你可以一個一個做這個效果， 這個當(dāng)然是可以做到的， 不過效率太差， 搞不好會掛掉用戶的電腦，比如筆者遇到的情況，有幾十個上百個子元素 這個方法是萬萬使不得滴。。
針對性解決辦法
我們要在使用position:relative 而且不使用each()的情況下達(dá)到這個效果，可以嗎？
可以！
既然這是一個bug 那一定就有hack的方法
$('.fadein').css('position', 'relative').fadeIn();
在fadeIn()之前動態(tài)的將其position屬性改為relative; 會解決IE7下的這個bug
<style>
.relative{position: relative; filter: inherit}
</style>
在你子元素有position屬性的元素加 filter: inherit; 當(dāng)前元素的第一層子元素也要加。
這兩條一結(jié)合 IE678 的問題就都解決了
如對本文有疑問，請?zhí)峤坏浇涣髡搲瑥V大熱心網(wǎng)友會為你解答?。?點(diǎn)擊進(jìn)入論壇
