javascript淡入淡出效果的實現(xiàn)思路
更新時間：2012年03月31日 01:55:52 作者：
這個思路是最近寫XScroll.js類的時候想明白的。平常我們說的淡入淡出效果，一般分成兩部分，一半是淡入，另一半就是淡出了。不過經(jīng)過分析，我覺得其實只需要一半就行了
如題，只有思路，沒有代碼。
這個思路是最近寫XScroll.js類的時候想明白的。平常我們說的淡入淡出效果，一般分成兩部分，一半是淡入，另一半就是淡出了。不過經(jīng)過分析，我覺得其實只需要一半就行了。
比如寫一個圖片切換類，切換效果是淡入淡出，通常我們會這樣寫：當(dāng)切換發(fā)生的時候，當(dāng)前顯示的圖片淡出（漸漸隱藏），將要顯示的圖片淡入（漸漸出現(xiàn)），通常兩張圖片的動畫速度是一致的，以便實現(xiàn)當(dāng)前圖片完全隱藏之時就是下一張圖片完全顯示之日。
我們來列一個簡單的步驟：
當(dāng)前圖片漸隱，透明度由100%變成90%；同時下一張圖片漸顯，透明度由0變成10.
當(dāng)前圖透明度80%，下張圖透明度20%
當(dāng)前圖70%，下張圖30%。
。。。。
當(dāng)前圖10%，下張圖90%
完成切換
其實，這樣做完全是一種浪費！
我們想一想，如果下張圖zIndex位于當(dāng)前圖之上，當(dāng)它漸顯的時候，因為越來越不透明，所以視覺上，他下層的當(dāng)前圖片看起來就越來越透明！
比如，下張圖透明度為20%的時候，因為他覆蓋在當(dāng)前圖上，所以當(dāng)前圖片看起來透明度就是100%-20%=80%！
所以，在制作淡入淡出切換效果的時候，其實只需要淡入效果即可，淡入的同時，淡出就發(fā)生著；淡入結(jié)束時，就是淡出終結(jié)。這樣一來，永遠不用擔(dān)心淡入與淡出不同步的問題。
關(guān)鍵是，這樣一來只用同時循環(huán)設(shè)置一張圖片的透明度（即下張圖），不用管被擋住的這張（即當(dāng)前圖），節(jié)約了一半的運算。這也算是優(yōu)化了javascript的執(zhí)行效率吧？
所以，我實現(xiàn)淡入淡出切換效果的思路就是：
將下一張圖片的zIndex設(shè)置于當(dāng)前圖片之上
下一張圖片進行淡入（漸顯）循環(huán)；當(dāng)前圖片不操作。
淡入進行時，淡出同步發(fā)生；淡入完成，淡出同時完成。
注：此思路只適合于當(dāng)前圖與下一張圖重疊的情況（大部分時候都是這樣）。
這個思路是最近寫XScroll.js類的時候想明白的。平常我們說的淡入淡出效果，一般分成兩部分，一半是淡入，另一半就是淡出了。不過經(jīng)過分析，我覺得其實只需要一半就行了。
比如寫一個圖片切換類，切換效果是淡入淡出，通常我們會這樣寫：當(dāng)切換發(fā)生的時候，當(dāng)前顯示的圖片淡出（漸漸隱藏），將要顯示的圖片淡入（漸漸出現(xiàn)），通常兩張圖片的動畫速度是一致的，以便實現(xiàn)當(dāng)前圖片完全隱藏之時就是下一張圖片完全顯示之日。
我們來列一個簡單的步驟：
當(dāng)前圖片漸隱，透明度由100%變成90%；同時下一張圖片漸顯，透明度由0變成10.
當(dāng)前圖透明度80%，下張圖透明度20%
當(dāng)前圖70%，下張圖30%。
。。。。
當(dāng)前圖10%，下張圖90%
完成切換
其實，這樣做完全是一種浪費！
我們想一想，如果下張圖zIndex位于當(dāng)前圖之上，當(dāng)它漸顯的時候，因為越來越不透明，所以視覺上，他下層的當(dāng)前圖片看起來就越來越透明！
比如，下張圖透明度為20%的時候，因為他覆蓋在當(dāng)前圖上，所以當(dāng)前圖片看起來透明度就是100%-20%=80%！
所以，在制作淡入淡出切換效果的時候，其實只需要淡入效果即可，淡入的同時，淡出就發(fā)生著；淡入結(jié)束時，就是淡出終結(jié)。這樣一來，永遠不用擔(dān)心淡入與淡出不同步的問題。
關(guān)鍵是，這樣一來只用同時循環(huán)設(shè)置一張圖片的透明度（即下張圖），不用管被擋住的這張（即當(dāng)前圖），節(jié)約了一半的運算。這也算是優(yōu)化了javascript的執(zhí)行效率吧？
所以，我實現(xiàn)淡入淡出切換效果的思路就是：
將下一張圖片的zIndex設(shè)置于當(dāng)前圖片之上
下一張圖片進行淡入（漸顯）循環(huán)；當(dāng)前圖片不操作。
淡入進行時，淡出同步發(fā)生；淡入完成，淡出同時完成。
注：此思路只適合于當(dāng)前圖與下一張圖重疊的情況（大部分時候都是這樣）。
相關(guān)文章
使用JavaScript和MQTT開發(fā)物聯(lián)網(wǎng)應(yīng)用示例解析
這篇文章主要介紹了使用JavaScript和MQTT開發(fā)物聯(lián)網(wǎng)應(yīng)用示例解析，文章通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
reduce 為數(shù)組中的每一個元素依次執(zhí)行回調(diào)函數(shù)，不包括數(shù)組中被刪除或從未被賦值的元素。接下來通過本文給大家分享JS數(shù)組Reduce()方法詳解及高級技巧，一起看看吧2017-08-08
這篇文章主要介紹了用POSTMAN發(fā)送JSON格式的POST請求示例,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
JS 設(shè)計模式之：工廠模式定義與實現(xiàn)方法淺析
這篇文章主要介紹了JS 設(shè)計模式之：工廠模式,結(jié)合實例形式分析了JS 工廠模式基本概念、原理、定義、實現(xiàn)方法與操作注意事項,需要的朋友可以參考下2020-05-05
javascript中onmouse事件在div中失效問題的解決方法
我們預(yù)期只有當(dāng)鼠標(biāo)從div中移開的時候才會觸發(fā)onmouseout事件，可事實上，當(dāng)我們移到div中的元素時，例如：本例中的a標(biāo)簽時，就會觸發(fā) onmousout事件2012-01-01
JS實現(xiàn)顏色的10進制轉(zhuǎn)化成rgba格式的方法
這篇文章主要介紹了JS實現(xiàn)顏色的10進制轉(zhuǎn)化成rgba格式的方法,涉及javascript針對顏色數(shù)值轉(zhuǎn)換的相關(guān)運算操作技巧,需要的朋友可以參考下2017-09-09
JavaScript限定復(fù)選框的選擇個數(shù)示例代碼
有10個復(fù)選框，用戶最多只能勾選3個，否則就灰掉所有復(fù)選框，具體實現(xiàn)思路及代碼如下，感興趣的朋友可以參考下，希望對大家有所幫助2013-08-08
項目中經(jīng)常會使用到表格，數(shù)據(jù)量大的時候還需要進行分頁，項目設(shè)計階段，我選擇了bootstrapTable的js插件，個人覺得這個框架非常好用，支持服務(wù)器端分頁，此篇主要寫的主要是關(guān)于服務(wù)器分頁,需要的朋友可以參考下2016-12-12
獲取url上的某個參數(shù)的方法有很多，在本文為大家介紹下使用javascript是如何實現(xiàn)的，感興趣的朋友不要錯過2013-11-11
Uniapp中嵌入H5并在H5中跳轉(zhuǎn)到APP的指定頁面方法詳解
Uniapp是一款基于Vue.js框架的跨平臺開發(fā)工具,支持在一套代碼中開發(fā)出運行于各大平臺的應(yīng)用程序,這篇文章主要給大家介紹了關(guān)于Uniapp中嵌入H5并在H5中跳轉(zhuǎn)到APP的指定頁面的相關(guān)資料,需要的朋友可以參考下2023-09-09