如何使用JavaScript和CSS淡入淡出

我想使HTML div標籤淡入淡出。如何使用JavaScript和CSS淡入淡出

我有一些淡出的代碼，但是當我淡入時，div的不透明度保持在0.1並且不增加。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
<head> 
    <title>Fade to Black</title> 
    <script type="text/javascript"> 
     //<![CDATA[ 
     function slidePanel(elementToSlide, slideSource) 
     { 
      var element = document.getElementById(elementToSlide); 

      if(element.up == null || element.up == false) { 
       setTimeout("fadeOut(\"" + elementToSlide + "\")", 100); 
       element.up = true; 
       slideSource.innerHTML = "Bring it down"; 
      } else { 
       setTimeout("fadeIn(\"" + elementToSlide + "\")", 100); 
       element.up = false; 
       slideSource.innerHTML = "Take it up"; 
      } 
     } 

     function fadeIn(elementToFade) 
     { 
      var element = document.getElementById(elementToFade); 

      element.style.opacity += 0.1; 
      if(element.style.opacity > 1.0) { 
       element.style.opacity = 1.0; 
      } else { 
       setTimeout("fadeIn(\"" + elementToFade + "\")", 100); 
      } 
     } 

     function fadeOut(elementToFade) 
     { 
      var element = document.getElementById(elementToFade); 

      element.style.opacity -= 0.1; 
      if(element.style.opacity < 0.0) { 
       element.style.opacity = 0.0; 
      } else { 
       setTimeout("fadeOut(\"" + elementToFade + "\")", 100); 
      } 
     } 
     //]]> 
    </script> 
</head> 
<body> 
    <div> 
     <div id="slideSource" 
       style="width:150px; height:20px; 
        text-align:center; background:green" 
      onclick="slidePanel('panel', this)"> 
      Take It up 
     </div> 
     <div id="panel" 
       style="width:150px; height:130px; 
        text-align:center; background:red; 
        opacity:1.0;"> 
      Contents 
     </div> 
    </div> 
</body> 
</html>

我在做什麼錯的，什麼是淡入和淡出元素的最佳方法是什麼？

來源

2011-05-25 Rafał

你能解釋一下fadeIn嗎？使用遞歸，直到不透明度達到一個，然後函數停止？但是退出func並沒有返回錯誤。 – Timo 2013-11-06 08:00:47

你不需要JavaScript就可以淡入淡出。 [CSS可以更容易地做到這一點]（https://stackoverflow.com/a/18760338/1269037）。 – 2018-02-22 06:42:21

好吧，我已經工作了

element.style.opacity = parseFloat(element.style.opacity) + 0.1;

如果由於不透明度值被存儲爲字符串，而不是作爲浮子用於代替

element.style.opacity += 0.1;

器同上

element.style.opacity = parseFloat(element.style.opacity) - 0.1;

代替

element.style.opacity -= 0.1;

。儘管如此，我仍然不確定增加的效果。

來源

2011-05-26 07:58:49

您也可以使用'element.style.opacity = + element.style.opacity + 0.1;'。一元加運算符將字符串轉換爲數字（在這種情況下爲float） – A1rPun 2014-08-19 20:45:14

您應該避免將值存儲在DOM中，除非您不關心性能... – 2017-05-01 22:09:04

這裏是淡出元素的更有效的方法：

function fade(element) { 
    var op = 1; // initial opacity 
    var timer = setInterval(function() { 
     if (op <= 0.1){ 
      clearInterval(timer); 
      element.style.display = 'none'; 
     } 
     element.style.opacity = op; 
     element.style.filter = 'alpha(opacity=' + op * 100 + ")"; 
     op -= op * 0.1; 
    }, 50); 
}

，你可以做反向的淡入

的setInterval或setTimeout的不應該得到一個字符串作爲參數

谷歌的eval的邪惡知道爲什麼

而這裏是是一種更有效的衰減方式，在中有一個元素。

function unfade(element) { 
    var op = 0.1; // initial opacity 
    element.style.display = 'block'; 
    var timer = setInterval(function() { 
     if (op >= 1){ 
      clearInterval(timer); 
     } 
     element.style.opacity = op; 
     element.style.filter = 'alpha(opacity=' + op * 100 + ")"; 
     op += op * 0.1; 
    }, 10); 
}

來源

2011-05-25 07:58:14 Ibu

+1爲較少評估和非依賴性解決方案:) – danjah 2011-05-25 08:07:19

如何讓它淡入？ – 2013-07-21 19:22:37

@LohnClaidon淡入，設置op = 0將條件更新爲if（op> = 1），並將末尾的增量表達式更改爲op + = op * 0.1。我沒有測試過，但我很積極，它會工作。當然，你可以去掉'display ='none''行 – Ibu 2013-07-22 17:47:46

爲什麼要這樣對自己？

的jQuery：

$("#element").fadeOut(); 
$("#element").fadeIn();

我認爲這是比較容易。

www.jquery.com

來源

2011-05-25 07:59:54

+1依賴解決方案：P – danjah 2011-05-25 08:07:36

真棒，我不知道你可以用jQuery如此輕鬆地做到這一點 – 2011-05-25 09:50:58

@Danjah，你是否總是想要重新發明輪子？如果將來功能中斷，則只需更新jquery文件。 – Codebeat 2012-12-04 13:30:28

我覺得我得到的問題：

一旦你做出格淡出你不退出功能：在淡出透明度已成爲即使再次調用自身0

if(element.style.opacity < 0.0) { 
      return; 
     }

，做同樣的淡入太

來源

2011-05-25 08:41:23

繼承人我的淡入/淡出功能的代碼。

fadeIn: function (len) { 
       var obj = this.e; 
       obj.style.display = ''; 
       var op = 0; 
       var timer = setInterval(function() { 
        if (op >= 1 || op >= 1.0){ 
         console.log('done', op) 
         clearInterval(timer); 
        } 
        obj.style.opacity = op.toFixed(1); 
        op += 0.1; 
        console.log(obj.style.opacity); 
       }, len); 
       return this; 
      }, 
    fadeOut: function (len) { 
       var obj = this.e; 
       var op = 1; 
       var timer = setInterval(function() { 
        if (op <= 0){ 
         clearInterval(timer); 
         console.log('done', op) 
         obj.style.display = 'none'; 
        } 
        obj.style.opacity = op.toFixed(1); 
        op -= 0.1; 
        console.log(obj.style.opacity) 
       }, len); 
       return this; 
      },

這是從我做的jQuery風格庫。希望它是有幫助的。鏈接LIB上CLOUD9： https://c9.io/christopherdumas/magik_wb

來源

2013-05-31 19:41:17

鏈接被破壞... – shawndumas 2015-01-17 16:18:13

這是我嘗試使用JavaScript和CSS3動畫所以HTML：

<div id="handle">Fade</div> 
<div id="slideSource">Whatever you want images or text here</div>

與過渡的CSS3：

div#slideSource { 
opacity:1; 
-webkit-transition: opacity 3s; 
-moz-transition: opacity 3s;  
transition: opacity 3s; 
} 

div#slideSource.fade { 
opacity:0; 
}

JavaScript部分。檢查className是否存在，如果存在，則添加類和轉換。

document.getElementById('handle').onclick = function(){ 
    if(slideSource.className){ 
     document.getElementById('slideSource').className = ''; 
    } else { 
     document.getElementById('slideSource').className = 'fade'; 
    } 
}

只需單擊它就會淡入和淡出。我會推薦使用JQuery作爲Itai Sagi提到的。我遺漏了Opera和MS，所以我會建議使用前綴將其添加到css中。這是我第一次發佈在stackoverflow上，但它應該工作正常。

來源

2013-07-12 10:55:01

這是一個簡化的運行示例Seattle Ninja's solution。

var slideSource = document.getElementById('slideSource'); 
 

 
document.getElementById('handle').onclick = function() { 
 
    slideSource.classList.toggle('fade'); 
 
}

#slideSource { 
 
    opacity: 1; 
 
    transition: opacity 1s; 
 
} 
 

 
#slideSource.fade { 
 
    opacity: 0; 
 
}

<button id="handle">Fade</button> 
 
<div id="slideSource">Whatever you want here - images or text</div>

來源

2013-09-12 09:22:33 Gb01

我喜歡伊布的一個，但我想我已經用自己的想法更好的解決方案。

//Fade In. 
element.style.opacity = 0; 
var Op1 = 0; 
var Op2 = 1; 
var foo1, foo2; 
foo1 = setInterval(Timer1, 20); 
function Timer1() 
{ 
    element.style.opacity = Op1; 
    Op1 = Op1 + .01; 
    console.log(Op1); //Option, but I recommend it for testing purposes. 
    if (Op1 > 1) 
    { 
     clearInterval(foo1); 
     foo2 = setInterval(Timer3, 20); 
    } 
}

此解決方案使用不同於布洛芬的解決方案，它使用了乘法公式一個附加方程。它的工作方式是在方程中需要一個時間增量（t），一個不透明度增量（o）和一個不透明度限制（l），它是：（T =以毫秒爲單位的衰落時間）[T =（l/○）* T]。「20」表示時間增量或間隔（t），「.01」表示不透明度增量（o），並且1表示不透明度限制（l）。當你插入公式中的數字時，你會得到2000毫秒（或2秒）。以下是控制檯日誌：

0.01 
0.02 
0.03 
0.04 
0.05 
0.060000000000000005 
0.07 
0.08 
0.09 
0.09999999999999999 
0.10999999999999999 
0.11999999999999998 
0.12999999999999998 
0.13999999999999999 
0.15 
0.16 
0.17 
0.18000000000000002 
0.19000000000000003 
0.20000000000000004 
0.21000000000000005 
0.22000000000000006 
0.23000000000000007 
0.24000000000000007 
0.25000000000000006 
0.26000000000000006 
0.2700000000000001 
0.2800000000000001 
0.2900000000000001 
0.3000000000000001 
0.3100000000000001 
0.3200000000000001 
0.3300000000000001 
0.34000000000000014 
0.35000000000000014 
0.36000000000000015 
0.37000000000000016 
0.38000000000000017 
0.3900000000000002 
0.4000000000000002 
0.4100000000000002 
0.4200000000000002 
0.4300000000000002 
0.4400000000000002 
0.45000000000000023 
0.46000000000000024 
0.47000000000000025 
0.48000000000000026 
0.49000000000000027 
0.5000000000000002 
0.5100000000000002 
0.5200000000000002 
0.5300000000000002 
0.5400000000000003 
0.5500000000000003 
0.5600000000000003 
0.5700000000000003 
0.5800000000000003 
0.5900000000000003 
0.6000000000000003 
0.6100000000000003 
0.6200000000000003 
0.6300000000000003 
0.6400000000000003 
0.6500000000000004 
0.6600000000000004 
0.6700000000000004 
0.6800000000000004 
0.6900000000000004 
0.7000000000000004 
0.7100000000000004 
0.7200000000000004 
0.7300000000000004 
0.7400000000000004 
0.7500000000000004 
0.7600000000000005 
0.7700000000000005 
0.7800000000000005 
0.7900000000000005 
0.8000000000000005 
0.8100000000000005 
0.8200000000000005 
0.8300000000000005 
0.8400000000000005 
0.8500000000000005 
0.8600000000000005 
0.8700000000000006 
0.8800000000000006 
0.8900000000000006 
0.9000000000000006 
0.9100000000000006 
0.9200000000000006 
0.9300000000000006 
0.9400000000000006 
0.9500000000000006 
0.9600000000000006 
0.9700000000000006 
0.9800000000000006 
0.9900000000000007 
1.0000000000000007 
1.0100000000000007

請注意不透明度如何跟隨不透明度增量值.01，就像在代碼中一樣。如果您使用Ibu製作的代碼，您將在控制檯日誌中獲得這些數字（或類似的東西）。這是我得到的。

0.0101 
0.010201 
0.01030301 
0.0104060401 
0.010510100501 
0.010615201506009999 
0.0107213535210701 
0.0108285670562808 
0.010936852726843608 
0.011046221254112044 
0.011156683466653165 
0.011268250301319695 
0.011380932804332892 
0.01149474213237622 
0.011609689553699983 
0.011725786449236983 
0.011843044313729352 
0.011961474756866645 
0.012081089504435313 
0.012201900399479666 
0.
0.012447158597509207 
0.0125716301834843 
0.012697346485319142 
0.012824319950172334 
0.012952563149674056 
0.013082088781170797 
0.013212909668982505 
0.01334503876567233 
0.013478489153329052 
0.013613274044862343 
0.013749406785310966 
0.013886900853164076 
0.014025769861695717 
0.014166027560312674 
0.014307687835915801 
0.01445076471427496 
0.01459527236141771 
0.014741225085031886 
0.014888637335882205 
0.015037523709241028 
0.015187898946333437 
0.01533977793579677 
0.015493175715154739 
0.015648107472306286 
0.01580458854702935 
0.015962634432499644 
0.01612226077682464 
0.016283483384592887 
0.016446318218438817 
0.016610781400623206 
0.01677688921462944 
0.016944658106775732 
0.01711410468784349 
0.017285245734721923 
0.017458098192069144 
0.017632679173989835 
0.01780900596572973 
0.01798709602538703 
0.018166966985640902 
0.01834863665549731 
0.018532123022052285 
0.018717444252272807 
0.018904618694795535 
0.01909366488174349 
0.019284601530560927 
0.019477447545866538 
0.0196722220213252 
0.019868944241538455 
0.02006763368395384 
0.02026831002079338 
0.020470993121001313 
0.020675703052211326 
0.02088246008273344 
0.021091284683560776 
0.021302197530396385 
0.02151521950570035 
0.021730371700757353 
0.021947675417764927 
0.022167152171942577 
0.022388823693662 
0.022612711930598623 
0.022838839049904608 
0.023067227440403654 
0.02329789971480769 
0.023530878711955767 
0.023766187499075324 
0.024003849374066077 
0.02424388786780674 
0.024486326746484807 
0.024731190013949654 
0.024978501914089152 
0.025228286933230044 
0.025480569802562344 
0.025735375500587968 
0.025992729255593847 
0.026252656548149785 
0.026515183113631283 
0.026780334944767597 
0.027048138294215273 
0.027318619677157426 
0.027591805873929 
0.02786772393266829 
0.028146401171994972 
0.028427865183714922 
0.02871214383555207 
0.02899926527390759 
0.029289257926646668 
0.029582150505913136 
0.029877972010972267 
0.030176751731081992 
0.030478519248392812 
0.03078330444087674 
0.031091137485285508 
0.031402048860138365 
0.03171606934873975 
0.03203323004222715 
0.03235356234264942 
0.03267709796607591 
0.03300386894573667 
0.03333390763519403 
0.03366724671154597 
0.03400391917866143 
0.03434395837044805 
0.03468739795415253 
0.03503427193369406 
0.035384614653031 
0.035738460799561306 
0.03609584540755692 
0.03645680386163249 
0.03682137190024882 
0.03718958561925131 
0.03756148147544382 
0.03793709629019826 
0.03831646725310024 
0.038699631925631243 
0.03908662824488755 
0.039477494527336426 
0.03987226947260979 
0.040270992167335894 
0.04067370208900925 
0.04108043910989934 
0.04149124350099834 
0.04190615593600832 
0.042325217495368404 
0.04274846967032209 
0.04317595436702531 
0.04360771391069556 
0.044043791049802515 
0.04448422896030054 
0.04492907124990354 
0.04537836196240258 
0.045832145582026605 
0.04629046703784687 
0.04675337170822534 
0.047220905425307595 
0.04769311447956067 
0.04817004562435628 
0.04865174608059984 
0.04913826354140584 
0.0496296461768199 
0.0501259426385881 
0.05062720206497398 
0.05113347408562372 
0.05164480882647996 
0.05216125691474476 
0.05268286948389221 
0.053209698178731134 
0.05374179516051845 
0.05427921311212363 
0.05482200524324487 
0.05537022529567732 
0.05592392754863409 
0.056483166824120426 
0.05704799849236163 
0.05761847847728525 
0.0581946632620581 
0.05877660989467868 
0.059364375993625464 
0.05995801975356172 
0.060557599951097336 
0.06116317595060831 
0.06177480771011439 
0.06239255578721554 
0.0630164813450877 
0.06364664615853857 
0.06428311262
0.0649259437463252 
0.06557520318378844 
0.06623095521562633 
0.0668932647677826 
0.06756219741546042 
0.06823781938961503 
0.06892019758351117 
0.06960939955934628 
0.07030549355493974 
0.07100854849048914 
0.07171863397539403 
0.07243582031514798 
0.07316017851829945 
0.07389178030348245 
0.07463069810651728 
0.07537700508758245 
0.07613077513845827 
0.07689208288984285 
0.07766100371874128 
0.0784376137559287 
0.07922198989348798 
0.08001420979242287 
0.0808143518903471 
0.08162249540925057 
0.08243872036334307 
0.0832631075669765 
0.08409573864264626 
0.08493669602907272 
0.08578606298936345 
0.08664392361925709 
0.08751036285544966 
0.08838546648400417 
0.08926932114884421 
0.09016201436033265 
0.09106363450393598 
0.09197427084897535 
0.0928940135574651 
0.09382295369303975 
0.09476118322997015 
0.09570879506226986 
0.09666588301289256 
0.09763254184302148 
0.0986088672614517 
0.09959495593406621 
0.10059090549340688 
0.10159681454834095 
0.10261278269382436 
0.1036389105207626 
0.10467529962597022 
0.10572205262222992 
0.10677927314845222 
0.10784706587993674 
0.10892553653873611 
0.11001479190412347 
0.1111149398231647 
0.11222608922139635 
0.11334835011361032 
0.11448183361474643 
0.11562665195089389 
0.11678291847040283 
0.11795074765510685 
0.11913025513165793 
0.1203215576829745 
0.12152477325980425 
0.12274002099240229 
0.12396742120232632 
0.12520709541434957 
0.12645916636849308 
0.127723758032178 
0.12900099561249978 
0.13029100556862477 
0.13159391562431103 
0.13290985478055414 
0.1342389533283597 
0.13558134286164328 
0.1369371562902597 
0.1383065278531623 
0.13968959313169393 
0.14108648906301088 
0.142497353953641 
0.1439223274931774 
0.14536155076810917 
0.14681516627579025 
0.14828331793854815 
0.14976615111793362 
0.15126381262911295 
0.15277645075540408 
0.15430421526295812 
0.1558472574155877 
0.15740572998974356 
0.158979787289641 
0.1605695851625374 
0.16217528101416276 
0.16379703382430438 
0.16543500416254742 
0.1670893542041729 
0.16876024774621462 
0.17044785022367676 
0.17215232872591352 
0.17387385201317265 
0.17561259053330439 
0.17736871643863744 
0.1791424036030238 
0.18093382763905405 
0.1827431659154446 
0.18457059757459904 
0.18641630355034502 
0.1882804665858485 
0.19016327125170698 
0.19206490396422404 
0.19398555300386627 
0.19592540853390494 
0.197884662619244 
0.19986350924543644 
0.20186214433789082 
0.20388076578126973 
0.20591957343908243 
0.20797876917347324 
0.21005855686520797 
0.21215914243386005 
0.21428073385819865 
0.21642354119678064 
0.21858777660874845 
0.22077365437483593 
0.2229813909185843 
0.22521120482777013 
0.22746331687604782 
0.2297379500448083 
0.23203532954525638 
0.23435568284070896 
0.23669923966911605 
0.2390662320658072 
0.24145689438646528 
0.24387146333032994 
0.24631017796363325 
0.24877327974326957 
0.25126101254070227 
0.2537736226661093 
0.2563113588927704 
0.2588744724816981 
0.26146321720651505 
0.2640778493785802 
0.266718627872366 
0.26938581415108964 
0.27207967229260055 
0.27480046901552657 
0.27754847370568186 
0.28032395844273866 
0.28312719802716607 
0.28595847000743774 
0.2888180547075121 
0.2917062352545872 
0.2946232976071331 
0.2975695305832044 
0.3005452258890364 
0.3035506781479268 
0.3065861849294061 
0.3096520467787002 
0.3127485672464872 
0.31587605291895204 
0.31903481344814155 
0.322225161582623 
0.3254474131984492 
0.3287018873304337 
0.33198890620373805 
0.33530879526577545 
0.3386618832184332 
0.34204850205061754 
0.3454689870711237 
0.34892367694183496 
0.35241291371125333 
0.35593704284836586 
0.3594964132768495 
0.363091377409618 
0.3667222911837142 
0.3703895140955513 
0.37409340923650686 
0.37783434332887195 
0.38161268676216065 
0.38542881362978226 
0.3892831017660801 
0.3931759327837409 
0.3971076921115783 
0.40107876903269407 
0.405089556723021 
0.4091404522902512 
0.4132318568131537 
0.41736417538128523 
0.4215378171350981 
0.42575319530644906 
0.43001072725951356 
0.867 
0.43865394287742976 
0.4430404823062041 
0.44747088712926614 
0.4519455960005588 
0.45646505196056436 
0.46102970248017 
0.4656399995049717 
0.47029639950002144 
0.47499936349502164 
0.47974935712997185 
0.48454685070127157 
0.4893923192082843 
0.4942862424003671 
0.4992291048243708 
0.5042213958726145 
0.5092636098313407 
0.5143562459296541 
0.5194998083889507 
0.5246948064728402 
0.5299417545375685 
0.5352411720829442 
0.5405935838037736 
0.5459995196418114 
0.5514595148382295 
0.5569741099866118 
0.5625438510864779 
0.5681692895973427 
0.5738509824933161 
0.5795894923182493 
0.5853853872414317 
0.5912392411138461 
0.5971516335249846 
0.6031231498602344 
0.6091543813588367 
0.615245925172425 
0.6213983844241493 
0.6276123682683908 
0.6338884919510748 
0.6402273768705855 
0.6466296506392913 
0.6530959471456843 
0.6596269066171412 
0.6662231756833126 
0.6728854074401457 
0.6796142615145472 
0.6864104041296927 
0.6932745081709896 
0.7002072532526995 
0.7072093257852266 
0.7142814190430788 
0.7214242332335097 
0.7286384755658448 
0.7359248603215033 
0.7432841089247183 
0.7507169500139654 
0.7582241195141051 
0.7658063607092461 
0.7734644243163386 
0.7811990685595019 
0.789011059245097 
0.7969011698375479 
0.8048701815359234 
0.8129188833512826 
0.8210480721847955 
0.8292585529066434 
0.8375511384357098 
0.8459266498200669 
0.8543859163182677 
0.8629297754814503 
0.8715590732362648 
0.8802746639686274 
0.8890774106083137 
0.8979681847143969 
0.9069478665615408 
0.9160173452271562 
0.9251775186794278 
0.9344292938662221 
0.9437735868048843 
0.9532113226729332 
0.9627434358996625 
0.9723708702586591 
0.9820945789612456 
0.9919155247508581 
1.0018346799983666 
1.0118530267983503

請注意，沒有可識別的模式。如果你運行Ibu的代碼，你永遠不會知道淡入淡出的時間。你將不得不搶一個計時器，並猜測並檢查2秒鐘。儘管如此，Ibu的代碼確實做了很好的淡入（它可能適用於淡出，我不知道，因爲我沒有使用淡出）。我的代碼也適用於淡出。我們只是說你想要淡出2秒。你可以用我的代碼來做到這一點。以下是它的外觀：

//Fade out. (Continued from the fade in. 
function Timer2() 
{ 
    element.style.opacity = Op2; 
    Op2 = Op2 - .01; 
    console.log(Op2); //Option, but I recommend it for testing purposes. 
    if (Op2 < 0) 
    { 
     clearInterval(foo2); 
    } 
}

我所做的只是將不透明度更改爲1（或完全不透明）。我將不透明度增量更改爲-.01，以便它開始變得不可見。最後，我將不透明度限制更改爲0.當它達到不透明限制時，計時器將停止。與最後一個相同，除了它使用1而不是0.當您運行代碼時，以下是控制檯日誌相對應的樣子。

.99 
0.98 
0.97 
0.96 
0.95 
0.94 
0.9299999999999999 
0.9199999999999999 
0.9099999999999999 
0.8999999999999999 
0.8899999999999999 
0.8799999999999999 
0.8699999999999999 
0.8599999999999999 
0.8499999999999999 
0.8399999999999999 
0.8299999999999998 
0.8199999999999998 
0.8099999999999998 
0.7999999999999998 
0.7899999999999998 
0.7799999999999998 
0.7699999999999998 
0.7599999999999998 
0.7499999999999998 
0.7399999999999998 
0.7299999999999998 
0.7199999999999998 
0.7099999999999997 
0.6999999999999997 
0.6899999999999997 
0.6799999999999997 
0.6699999999999997 
0.6599999999999997 
0.6499999999999997 
0.6399999999999997 
0.6299999999999997 
0.6199999999999997 
0.6099999999999997 
0.5999999999999996 
0.5899999999999996 
0.5799999999999996 
0.5699999999999996 
0.5599999999999996 
0.5499999999999996 
0.5399999999999996 
0.5299999999999996 
0.5199999999999996 
0.5099999999999996 
0.49999999999999956 
0.48999999999999955 
0.47999999999999954 
0.46999999999999953 
0.4599999999999995 
0.4499999999999995 
0.4399999999999995 
0.4299999999999995 
0.4199999999999995 
0.4099999999999995 
0.39999999999999947 
0.38999999999999946 
0.37999999999999945 
0.36999999999999944 
0.35999999999999943 
0.3499999999999994 
0.3399999999999994 
0.3299999999999994 
0.3199999999999994 
0.3099999999999994 
0.2999999999999994 
0.28999999999999937 
0.27999999999999936 
0.26999999999999935 
0.25999999999999934 
0.24999999999999933 
0.23999999999999932 
0.22999999999999932 
0.2199999999999993 
0.2099999999999993 
0.1999999999999993 
0.18999999999999928 
0.17999999999999927 
0.16999999999999926 
0.15999999999999925 
0.14999999999999925 
0.13999999999999924 
0.12999999999999923 
0.11999999999999923 
0.10999999999999924 
0.09999999999999924 
0.08999999999999925 
0.07999999999999925 
0.06999999999999926 
0.059999999999999255 
0.04999999999999925 
0.03999999999999925 
0.02999999999999925 
0.019999999999999248 
0.009999999999999247 
-7.528699885739343e-16 
-0.010000000000000753

正如您所看到的，.01模式仍然存在於淡出中。這兩個淡入淡出和精確。我希望這些代碼能夠幫助你，或者讓你瞭解這個話題。如果您有任何補充或建議，請告訴我。感謝您花時間查看此內容！

來源

2017-02-01 00:18:19

如何使用JavaScript和CSS淡入淡出

回答

相關問題