淡入，然后使用css过渡淡出一段时间

Question

我想淡入，等待一段时间，然后使用jQuery的addClass和removeClass 淡出主页的一个元素

这段JS代码会在div中淡出，但不会淡出。我使用的是jQuery 2.1.3

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

我有这个CSS:

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

此HTML:

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

Answer 1

addclass()方法不将回调作为参数。试试这个：

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/

Answer 2

您应该更改CSS

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

无类别

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