CODEWITHSUNDEEP
javascriptjquerycsscss-transitions
Hedge
Hedge

Reputation: 16748

fade in then fade out after some time by using css-transitions

I'd like to fade in, wait some time, then fade out an element of homepage using jQuery's addClass and removeClass

This JS-code fades in the div but doesn't fade it out. I'm using jQuery 2.1.3

if ($("#save-success").hasClass("fadeout")){
     $("#save-success").removeClass("fadeout").addClass("fadein", function() {
         $(this).delay(2000).removeClass("fadein").addClass("fadeout");
    })
}

I've got this CSS:

.fadein, .fadeout {
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}
.fadein {
  opacity: 1;
}

this HTML:

<div id="save-success" class="fadeout">
  Successfully saved
</div>

Upvotes: 2

Views: 2350

Answers (2)

bardzusny
bardzusny

Reputation: 3828

addclass() method doesn't take callback as argument. Try this instead:

if ($("#save-success").hasClass("fadeout")) {
  $("#save-success").removeClass("fadeout").addClass("fadein");
  setTimeout(function () {
    $('#save-success').removeClass("fadein").addClass("fadeout");
  }, 2000);
}

jsfiddle: http://jsfiddle.net/gwugyo4v/

Upvotes: 3

void
void

Reputation: 36703

You should change your CSS

.fadeout {
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}
.fadein {
  opacity: 1;
  transition: opacity 0.4s ease-in-out;
}

Without Classes

if ($("#save-success").hasClass("fadeout")){
     $("#save-success").fadeIn(400,  function() {
         $(this).delay(2000).fadeOut(400);
    });
}

Upvotes: 2

Related Questions