如何使用 JavaScript 和 CSS 进行淡入和淡出答案

【问题标题】：How to do fade-in and fade-out with JavaScript and CSS如何使用 JavaScript 和 CSS 进行淡入和淡出
【发布时间】：2011-09-01 13:09:03
【问题描述】：

我想让 HTML div 标签淡入淡出。

我有一些淡出的代码，但是当我淡入时，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>

我做错了什么以及淡入和淡出元素的最佳方式是什么？

【问题讨论】：

你能解释一下fadeIn吗？使用了递归，直到不透明度达到1，然后函数停止？但是退出函数没有return false。？
你不需要 JavaScript 来做淡入淡出。 CSS can do that way, way more easily.

标签： javascript css xhtml

【解决方案1】：

以下 javascript 将元素从不透明度 0 淡入到调用淡入时的不透明度值。您还可以设置动画的持续时间，这很好：

    function fadeIn(element) {
        var duration = 0.5;
        var interval = 10;//ms
        var op = 0.0;
        var iop = element.style.opacity;
        var timer = setInterval(function () {
            if (op >= iop) {
                op = iop;
                clearInterval(timer);
            }
            element.style.opacity = op;
            op += iop/((1000/interval)*duration);
        }, interval);
    }

*基于IBUs answer，但进行了修改以考虑以前的不透明度值和设置持续时间的能力，还删除了它所做的不相关的 CSS 更改

【讨论】：

【解决方案2】：

let count=0;
    let text = document.getElementById('heading');
    let btn = document.getElementById('btn');
    btn.addEventListener('click', function(){
        if(count%2==0){
            text.style.opacity="0.1";
            unfade(text);
       text.innerText="Welcome to Javascript </>"; 
            text.style.color="forestgreen";
                }//end of if
        else{   text.style.opacity="0.1";
            unfade(text);
            text.innerText="Hello javascript"; 
             text.style.color="blueviolet";
}//end of else
        count++;//for toggling the text
    });
    //function for fade effect--------
    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;
    }, 30);
}

<h1 style="color:blueviolet" id="heading">Hello javascript</h1>
<button id="btn">Click me</button>

【讨论】：

通常最好解释一个解决方案，而不是仅仅发布一些匿名代码行。你可以阅读How do I write a good answer，也可以阅读Explaining entirely code-based answers

【解决方案3】：

我通常使用这些实用功能。 element 是 HTML 元素，duration 是所需的持续时间（以毫秒为单位）。

export const fadeIn = (element, duration) => {
    (function increment(value = 0) {
        element.style.opacity = String(value);
        if (element.style.opacity !== '1') {
            setTimeout(() => {
                increment(value + 0.1);
            }, duration / 10);
        }
    })();
};

export const fadeOut = (element, duration) => {
    (function decrement() {
        (element.style.opacity -= 0.1) < 0 ? element.style.display = 'none' : setTimeout(() => {
            decrement();
        }, duration / 10);
    })();
};

【讨论】：

【解决方案4】：

这是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>

【讨论】：

【解决方案5】：

我喜欢 Ibu 的方法，但我认为我有一个更好的解决方案，可以使用他的想法。

//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);
    }
}

这个解决方案使用了一个额外的方程，这与 Ibu 的解决方案不同，后者使用了一个乘法方程。它的工作方式是在方程中需要时间增量 (t)、不透明度增量 (o) 和不透明度限制 (l)，即： (T = 淡入时间，以毫秒为单位) [T = (l/ o)*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

请注意不透明度如何跟随不透明度增量 0.01，就像在代码中一样。如果你使用 Ibu 制作的代码，

//I made slight edits but keeped the ESSENTIAL stuff in it.
var op = 0.01;  // initial opacity
var timer = setInterval(function () {
    if (op >= 1){
        clearInterval(timer);
    }
    element.style.opacity = op;
    op += op * 0.1;
}, 20);

您将在控制台日志中获得这些数字（或类似的数字）。这是我得到的。

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.012323919403474463
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.06428311262012396
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.43431083453210867
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 模式仍然存在于淡出中。两种渐变都平滑而精确。我希望这些代码对您有所帮助或让您深入了解该主题。如果您有任何补充或建议，请告诉我。感谢您抽出宝贵时间查看此内容！

【讨论】：

【解决方案6】：

这是一种更有效的淡出元素的方法：

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);
}

【讨论】：

如何让它淡入？
@LohnClaidon 淡入，设置op = 0 将条件更新为if(op >= 1) 并将末尾的增量表达式更改为op += op*0.1。我没有对此进行测试，但我很肯定它会起作用。当然，您删除 display ='none' 行
注意：op 永远为零！
截至 2015 年，我将使用 requestAnimationFrame 并使用 setTimeout 作为后备。
@RobertMolina 这是 Internet Explorer 上不透明度的属性。仅当您想支持旧版浏览器时才添加它。

【解决方案7】：

这是我对 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';
    }
}

只需单击，它就会淡入淡出。我建议使用 Itai Sagi 提到的 JQuery。我省略了 Opera 和 MS，所以我建议使用 prefixr 在 css 中添加它。这是我第一次在 stackoverflow 上发帖，但它应该可以正常工作。

【讨论】：

【解决方案8】：

这是我的淡入/淡出切换功能代码。

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 样式库。希望它有帮助。链接到 cloud9 上的 lib： https://c9.io/christopherdumas/magik_wb

【讨论】：

【解决方案9】：

好的，我已经解决了

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;

因为不透明度值存储为字符串，而不是浮点数。我仍然不确定为什么添加有效。

【讨论】：

您也可以使用element.style.opacity = +element.style.opacity + 0.1;。一元加号运算符将字符串转换为数字（在本例中为浮点数）
你应该避免在 DOM 中存储值，除非你不关心性能......

【解决方案10】：

我想我明白了：

一旦你让 div 淡出，你就不会退出函数：即使在 opacity 变为 0 之后，fadeout 也会再次调用自己

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

对淡入淡出也做同样的事情

【讨论】：

【解决方案11】：

为什么要这样对自己？

jQuery:

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

我认为这更容易。

www.jquery.com

【讨论】：

太棒了，我不知道你可以用 jQuery 轻松做到这一点
为什么要这样对自己。当天最佳评论:)
因为当您只想淡入淡出某些内容时，您不想等待巨大的脚本加载。
使用不良的连接，您会注意到不同之处。 @ItaiSagi
相信我，我只是将我的整个 jQuery 代码更改为 vanilla JS，并将所有 jQuery 动画更改为 CSS3。您会注意到不同之处。所有 CSS3 动画都是 GPU 加速的，这使得它们非常流畅...