Question

我有以下代码淡入和淡出三个对象，如下所示... 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);
    }

Answer 1

你可以这样做 -

当然这仅适用于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

1 个答案: