Question

我是 jquery 的新手。我有一个执行计算的表单，并在一个 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; }

Answer 1

您可以在 Jquery 中链接淡入淡出和淡出动画。请注意，您还可以将完整函数传递给任一动画，例如 $('#result').fadeOut('fast', () => {})。这确保我们只在结果完全消失时更新结果，然后新结果将立即以更新的值淡入。查看更多参考here。

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>

在淡入新信息之前淡出旧的 Flash 信息？

1 个答案: