简体   繁体   中英

FadeIn and Out, without jQuery

I try to achieve the following.

I have an article with some content. When I click a button, this article fades away. after its faded, it gets a new class, for showing content in an other way. and now I'd like to fade it in again. But I can't find a way to do it.

when I do the following, then the opacity stays a 1 from the beginning. The transition() function is called by the button. after 2000ms I call a function which alters the contents of the article. everything works fine when I do it with fadeOut only. but when I add fadeIn() the opacity stays at 1. Therefore I got no fade at all. but the content still changes at least.

function transition() {
    fadeOut("article");
    setTimeout(listener, 2000);
    fadeIn("article");
}

function fadeOut(element) {
    var ele = document.getElementsByTagName(element);
    ele[0].style.transition = "opacity 2s linear 0s";
    ele[0].style.opacity = 0;
}
function fadeIn(element) {
    var ele = document.getElementsByTagName(element);

    ele[0].style.transition = "opacity 2s linear 0s";
    ele[0].style.opacity = 1;
}

Hope somebody can give me a hint how to solve this. And please no advices for jQuery. I'd like to make it native.

You are misunderstanding what setTimeout does.

It always returns instantly, so you are effectively setting the opacity to 0 then instantly setting it back to 1 again.

Try this.

 function transition() {
      fadeOut("article");
      setTimeout(function() { fadeIn("article"); }, 2000);
 }

setTimeout will create a background timer and return, leaving the background timer ticking away. Your fadeIn function will then be called in two seconds.

Daniel,

First off, you need to put the return function in the setTimeout call rather than after as setTimeout sets and event to call that function after a given time so currently your transition is added immediately after the first making it switch from fade out to fade in immediately. Second it is much more efficient to do the get element call before calling the other functions so you are not searching the DOM all the time.

Here is an updated version of your code that though still is not perfect does include these suggestions.

 transition(); function transition(){ var ele = document.getElementsByTagName("article"); fadeOut(ele); setTimeout(function(){ fadeIn(ele); }, 2000); } function fadeOut(element) { element[0].style.transition = "opacity 2s linear 0s"; element[0].style.opacity = 0; } function fadeIn(element) { element[0].style.transition = "opacity 2s linear 0s"; element[0].style.opacity = 1; } 
 <body> <article> Test </article> </body> 

Also here is an updated version that takes in the possibility of multiple articles.

 transition(); function transition() { var ele = document.getElementsByTagName("article"); var count = ele.length; for (x = 0; x < count; x++) { fadeOut(ele[x]); } setTimeout(function() { for (x = 0; x < count; x++) { fadeIn(ele[x]); } }, 2000); } function fadeOut(element) { if (element != undefined) { element.style.transition = "opacity 2s linear 0s"; element.style.opacity = 0; } } function fadeIn(element) { if (element != undefined) { element.style.transition = "opacity 2s linear 0s"; element.style.opacity = 1; } } 
 <body> <article> Test </article> <article> Test </article> </body> 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM