使用 css-transitions 淡入然后在一段时间后淡出

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

你应该改变你的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);
    });
}

Answer 2

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/

使用 css-transitions 淡入然后在一段时间后淡出

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

javascript

jquery

css

css-transitions