Javascript 淡入然后淡出一段时间后使用css转换

我想淡入，等待一段时间，然后使用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>

成功保存

您应该更改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);
    });
}

方法不将回调作为参数。请尝试以下方法：

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

---

jsfiddle:

为什么不尝试不使用类代码的更新。纯CSS动画更流畅，尤其是在手机上