Fade In only; не Fade Out - чистый Javascript

У меня есть следующий код, который выцветает и из трех объектов, так как увидеть здесь ... http://ryanspahn.com/movies/testing.html Fade In only; не Fade Out - чистый Javascript

код, который управляет, что анимация является чисто 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); 
    }

источник

2015-11-16 chaser7016

вы пробовали, что 'функции fadeIn'? – rafaelcastrocouto

Функция toggleFeeds переплетается как с fadeIn, так и с fadeOut; не полностью понимая, что он делает, поэтому я пришел сюда, чтобы учиться. – chaser7016

Вы можете сделать что-то вроде this-

Конечно, это только для 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

источник

2015-11-16 23:21:07

спасибо! Я не уверен, что вы имеете в виду, как заставить это работать с дополнительными изображениями? Оцените дальнейшее понимание и еще раз спасибо! – chaser7016

Теперь он работает только по ID (GetElementById), вам нужно заменить его на getElementsByClass, добавить свой класс ко всем элементам и использовать цикл. Эта ссылка может поправить: http://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp –

Fade In only; не Fade Out - чистый Javascript

ответ

Смежные вопросы