javascript - 仅淡入；不淡出

javascript - 仅淡入；不淡出 - 纯 Javascript

转载作者：行者123 更新时间：2023-12-03 08:21:07

我有以下代码，可以淡入和淡出三个对象，如此处所示...... http://ryanspahn.com/movies/testing.html

驱动该动画的代码是纯 JS，如下所示。尽管我不希望它循环播放，只希望每个对象淡入/在页面上保持可见。知道如何更改以下内容来做到这一点吗？

var feedArr = Array("<img src='https://thingiverse-production-new.s3.amazonaws.com/renders/16/04/2d/b5/ed/smiley_face_thumb_small.jpg'>","<img src='http://www.mpaart.org/wp-content/uploads/2015/07/twitter-logo-round-50x50.png'>");
    var tweetCount = 0;

    function fadeOut(id,val){
      if(isNaN(val)){ val = 9;}
        document.getElementById(id).style.opacity='0.'+val;
        //For IE
        document.getElementById(id).style.filter='alpha(opacity='+val+'0)';
      if(val>0){
        val--;
        setTimeout('fadeOut("'+id+'",'+val+')',90);
      }else{return;}
    }

    function fadeIn(id,val){
      if(isNaN(val)){ val = 0;}
        document.getElementById(id).style.opacity='0.'+val;
        //For IE
        document.getElementById(id).style.filter='alpha(opacity='+val+'0)';
      if(val<9){
        val++;
        setTimeout('fadeIn("'+id+'",'+val+')',90);
      }else{return;}
    }

    function toogleFeeds(interval,val){
      var realIntravel=interval
      if(isNaN(val)){ val = 0;}
      if(val == 0){
        fadeOut('twitterFeed');
        val=1;
        realIntravel=1000;
      }else{
        document.getElementById('twitterFeed').innerHTML = feedArr[tweetCount];
        tweetCount++;
        if(tweetCount >=    feedArr.length){ tweetCount = 0;}
        fadeIn('twitterFeed');
        val=0;
      }
       setTimeout('toogleFeeds("'+interval+'",'+val+')',realIntravel);
    }

最佳答案

你可以做这样的事情-

当然这仅适用于 1 个元素，您可以使用类选择器或其他方式对多个元素使用相同的技术。

JS 看起来像这样:

var val = 0;
var myInterval 

function fadeIn() {

    var id = "fadeInOnly";
    var ele = document.getElementById(id);
    ele.style.opacity = '0.' + val;
    //For IE
    ele.style.filter = 'alpha(opacity=' + val + '0)';
    if (val < 9) {
        val++;
    } else {
        clearInterval(myInterval);
        return;
    }
}

function setFade(){
    myInterval = setInterval(fadeIn, 50);
}

HTML:

<body onload="setFade();">
    <div id="feedWrapper">

        <img id="fadeInOnly" src='https://thingiverse-production-new.s3.amazonaws.com/renders/16/04/2d/b5/ed/smiley_face_thumb_small.jpg'>
    </div>

fiddle example

关于javascript - 仅淡入；不淡出 - 纯 Javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33745285/