淡入旧的Flash消息，然后淡入新的消息吗？

debugcn 发表于 Dev

迪伦

我是jquery新手。我有一个执行计算的表格，并在Flash消息中返回结果。我的目标行为是：

提交第一份表格后，包含结果的Flash消息就会淡入
在随后的提交中，包含旧结果的Flash消息逐渐消失，然后新Flash消息逐渐消失。

我很困惑如何执行此操作，因为显然新旧结果具有相同的ID。

目前，仅淡入起作用。

jQuery的：

$(function() {
  $(".btn-primary").click(function() {
    $("#diagnosis").fadeOut("slow");
  });
$('#diagnosis').delay(0).fadeIn('normal', function() {
  $(this).delay(2500);
  });
});

的CSS

#diagnosis { display:none; }

Janice Zhong

您可以在Jquery中链接fadeIn和fadeOut动画。请注意，您还可以将完整的功能传递给任一动画，例如$('#result').fadeOut('fast', () => {})。这样可以确保仅在结果完全消失后才对其进行更新，然后新结果将立即以更新后的值淡入。在这里查看更多参考。

let arr = [4, 5, 6, 7, 8, 9, 10]

$('form').on("submit", (e) => {
  e.preventDefault();
  
  // mock calculated result 
  let genIdx = Math.floor(Math.random() * 7);
  let resultVal = arr[genIdx];
 
  $('#result').fadeOut('fast', () => {
      $('#result').text(resultVal);
  }).fadeIn('fast');

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <body>
    <form>
      <p id="result"></p>
      <button type="subimit">Submit</button>
    </form>
  </body>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。