您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > CSS3/js/jquery實(shí)現(xiàn)淡入（fadeIn）淡出（fadeOut）效果的方法

CSS3/js/jquery實(shí)現(xiàn)淡入（fadeIn）淡出（fadeOut）效果的方法

文章來源：365jz.com 點(diǎn)擊數(shù)：906 更新時(shí)間：2017-12-26 09:36 參與評論

基于CSS3實(shí)現(xiàn)淡入（fadeIn）淡出（fadeOut）效果:

淡入淡出效果大多是依照jquery中fadeIn和fadeOut的方法使用js來控制元素的透明度達(dá)到目的，但缺點(diǎn)是有輕微的卡頓感，并且運(yùn)行效率一般。這里提供另外一個(gè)思路，即通過預(yù)先定義好的css樣式控制圖片透明度的過渡，這種方法過渡平滑，過渡的效果基于css3的animation，所以效率高些。思路是將淡入，淡出的效果做成預(yù)先定義好的樣式類，然后用JS改變元素的類來達(dá)到圖片輪播。（注意：因?yàn)槭腔贑SS3的animation，在移動(dòng)端做的兼容性測試表現(xiàn)不錯(cuò)，桌面端暫時(shí)沒有發(fā)現(xiàn)太大的問題。但I(xiàn)E對于css的background支持不太好，外鏈圖片有時(shí)會(huì)有問題。）
基于CSS3淡入淡出效果的圖片自動(dòng)輪播DEMO點(diǎn)擊預(yù)覽
關(guān)鍵點(diǎn)在于fadeIn和fadeOut之間的透明度切換：

/* 輪播圖片默認(rèn)的樣式*/
       .bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      -webkit-transition: opacity 2s linear;
      -moz-transition: opacity 2s linear;
      -o-transition: opacity 2s linear;
      transition: opacity 2s linear;
      opacity:0;
      filter:alpha(opacity=0);
    }
        .fadein{
            opacity:100;
            filter:alpha(opacity=100);
        }

PS：輪播圖片默認(rèn)透明度為0，設(shè)置一個(gè)opacity=100名為fadein的類使用JS控制其與默認(rèn)透明度的切換，本篇博客的輪播方法是自動(dòng)的一張張切換，并無交互性，使用觸控左右滑動(dòng)圖片的輪播請猛戳俺的另一篇博客：原生JS實(shí)現(xiàn)滑動(dòng)圖片輪播

而JS方面則是通過獲取imgs數(shù)組，輪播其中存放圖片的div，方法是控制圖片div的class。
廢話不多說，上代碼：

HTML（后插入的圖片顯示在前）：

<div id="imgs">
<div id="bg1" class="bg"></div>
<div id="bg2" class="bg"></div>
</div>

CSS：

.bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transition: opacity 2s linear;
-moz-transition: opacity 2s linear;
-o-transition: opacity 2s linear;
transition: opacity 2s linear;
opacity:0;

}

#bg1 {
background: url(http://i1.tietuku.com/7b57a678c8999dbas.jpg) no-repeat;
background-size: cover;

}

#bg2 {
background: url(http://i1.tietuku.com/1182f22573e6051fs.jpg) no-repeat;
background-size: cover;
}

.fadein {
opacity: 100;
filter: alpha(opacity=100);
}

JS：

// 替換class達(dá)到淡入淡出的效果
function fadeIn(e) {
e.className = "bg fadein"
};

function fadeOut(e) {
e.className = "bg"
};
//申明圖片數(shù)組中當(dāng)前的輪播圖片
cur_img = document.getElementById("imgs").children.length - 1;
//圖片輪播函數(shù)
function turnImgs(imgs) {
    var imgs = document.getElementById("imgs").children;
    if (cur_img == 0) {
      fadeOut(imgs[cur_img]);
      cur_img = imgs.length - 1;
      fadeIn(imgs[cur_img]);
    } else {
      fadeOut(imgs[cur_img]);
      fadeIn(imgs[cur_img - 1]);
      cur_img--;
    }
}
//設(shè)置輪播間隔
setInterval(turnImgs, 3000);

demo中只用了兩張圖片，如果需要插入更多的圖片，可以在id=“imgs”的div中加入一個(gè)新的子div ，class加上bg即可，然后在CSS中加入該div的描述，比如HTML中加入<div id="bg3" class="bg"></div>，然后CSS中則加入

#bg3 {
background: url(圖片地址) no-repeat;
background-size: cover;
}
即可。

原生js實(shí)現(xiàn)fadein 和 fadeout淡入淡出效果：

js里面設(shè)置DOM節(jié)點(diǎn)透明度的函數(shù)屬性：filter= "alpha(opacity=" + value+ ")"（兼容ie）和opacity=value/100（兼容FF和GG）。

先來看看設(shè)置透明度的兼容性代碼：

 
function setOpacity(ele, opacity) { 
if (ele.style.opacity != undefined) { 
///兼容FF和GG和新版本IE 
ele.style.opacity = opacity / 100; 

} else { 
///兼容老版本ie 
ele.style.filter = "alpha(opacity=" + opacity + ")"; 
} 
}

關(guān)于有的小伙伴這樣寫：

 
function setOpacity(ele, opacity) { 
if (document.all) { 
///兼容ie 
ele.style.filter = "alpha(opacity=" + opacity + ")"; 
} 
ele { 
///兼容FF和GG 
ele.style.opacity = opacity / 100; 
} 
}

我想說這樣在IE10下運(yùn)行有問題，點(diǎn)了之后沒反應(yīng)。因?yàn)镮E10支持opacity屬性不支持filter了，這個(gè)方法不可取。

fadein 函數(shù)代碼：

 
function fadein(ele, opacity, speed) { 
if (ele) { 
var v = ele.style.filter.replace("alpha(opacity=", "").replace(")", "") || ele.style.opacity; 
v < 1 && (v = v * 100); 
var count = speed / 1000; 
var avg = count < 2 ? (opacity / count) : (opacity / count - 1); 
var timer = null; 
timer = setInterval(function() { 
if (v < opacity) { 
v += avg; 
setOpacity(ele, v); 
} else { 
clearInterval(timer); 
} 
}, 500); 
} 
}

fadeout 函數(shù)代碼：

 
function fadeout(ele, opacity, speed) { 
if (ele) { 
var v = ele.style.filter.replace("alpha(opacity=", "").replace(")", "") || ele.style.opacity || 100; 
v < 1 && (v = v * 100); 
var count = speed / 1000; 
var avg = (100 - opacity) / count; 
var timer = null; 
timer = setInterval(function() { 
if (v - avg > opacity) { 
v -= avg; 
setOpacity(ele, v); 
} else { 
clearInterval(timer); 
} 
}, 500); 
} 
}

下面給一個(gè)demo示例：

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<script type="text/javascript" src="fade.js"></script> 
<script type="text/javascript"> 

window.onload = function () { 


document.getElementById('Button1').onclick = function () { 

fadeout(document.getElementById('DV'), 0, 6000); 

} 
document.getElementById('Button2').onclick = function () { 

fadein(document.getElementById('DV'), 80, 6000); 

} 
} 
</script> 
</head> 
<body> 

<div id="DV" style="background-color: green; width: 400px; height: 400px;"></div> 
<input id="Button1" type="button" value="button" /> 
<input id="Button2" type="button" value="button" /> 

</body> 
</html>

Jquery中淡入淡出效果fadeIn()、fadeOut()、fadeToggle()、fadeTo()的使用方法：

一、基本語法

1、fadeIn淡入、fadeOut淡出、fadeToggle淡入淡出切換（已經(jīng)淡出點(diǎn)擊淡入，或者相反）：

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

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

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

可選的 speed 參數(shù)規(guī)定效果的時(shí)長。它可以取以下值："slow"（200ms）、"fast"（600ms）或毫秒。【默認(rèn)為400ms】
可選的 callback 參數(shù)是 fading 完成后所執(zhí)行的函數(shù)名稱。

2、fadeTo：jQuery fadeTo() 方法允許漸變?yōu)榻o定的不透明度（值介于 0 與 1 之間）。

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

必需的 speed 參數(shù)規(guī)定效果的時(shí)長。它可以取以下值："slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 參數(shù)將淡入淡出效果設(shè)置為給定的不透明度（值介于 0 與 1 之間）。
可選的 callback 參數(shù)是該函數(shù)完成后所執(zhí)行的函數(shù)名稱。

二、使用方法

1、內(nèi)聯(lián)調(diào)用（匿名函數(shù)）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <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, function(){
                    document.getElementById("pp").innerHTML = "效果出現(xiàn)了！";
                });
            });
        });
    </script>
</head>

<body>
    <p>演示帶有不同參數(shù)的 fadeIn() 方法。</p>
    <p id="pp">Testing</p>
    <button>點(diǎn)擊這里，使三個(gè)矩形淡入</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處寫函數(shù)。
2、外部調(diào)用

<!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 = "效果也出現(xiàn)了！";
        };
        $(document).ready(function(){
        $("button").click(function(){
            $("#div1").fadeIn("slow");
            $("#div2").fadeIn("fast");
                    $("#div3").fadeIn(3000, myFunc);
        });
        });
    </script>
</head>

<body>
    <p>演示帶有不同參數(shù)的 fadeIn() 方法。</p>
    <p id="pp">Testing</p>
    <button>點(diǎn)擊這里，使三個(gè)矩形淡入</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

點(diǎn)擊參考新API參數(shù)有三個(gè)，而callback（complete）參數(shù)是最后一個(gè)，那么為什么可以正確執(zhí)行呢？
這是JS特性之一，以前沒見過這樣的函數(shù)調(diào)用（因?yàn)槎加心J(rèn)值），而且發(fā)現(xiàn)我根本沒有把myFunc函數(shù)傳遞給Jquery函數(shù)！這必須深究一下，So JS函數(shù)到底是怎么回事？

四、JS函數(shù)重載

有過C系列語言學(xué)習(xí)經(jīng)歷的都知道，函數(shù)傳遞參數(shù)都會(huì)進(jìn)行一致性檢查，你傳遞多少個(gè)參數(shù)，參數(shù)的類型都會(huì)檢查。但是由上面的例子可以看出，javascript卻沒有這樣的一致性檢查！多傳、少傳好像他都能接受。驗(yàn)證過后確定確實(shí)是這樣的，傳遞很多個(gè)參數(shù)都可以。
還有一個(gè)問題是好像間隔傳遞都行？！這就很奇葩了，那么原因是什么呢？想了很久也沒想明白！查看源碼，發(fā)現(xiàn)很多jQuery.extend方法，那么確定了：原因是函數(shù)重載。但是我們注意到JS和C++的不同，C++會(huì)有參數(shù)檢查，多了不行，所以可以直接定義多個(gè)參數(shù)類型或者個(gè)數(shù)不同的同名函數(shù)實(shí)現(xiàn)重載，JS卻不管你有多少，只管前面的有效參數(shù)。那么怎么實(shí)現(xiàn)JS的函數(shù)重載？有很多方法！
1、利用arguments實(shí)現(xiàn)；
2、利用typeof進(jìn)行參數(shù)類型判斷；
但是這兩種方法有很大的局限性，要是處理的參數(shù)很多，重載邏輯豈不是很復(fù)雜??？那么有沒有好的方法呢？
最終發(fā)現(xiàn)暫時(shí)還沒有極好的方法，但是看到幾篇還不錯(cuò)的文章