如何在使用jQuery重新加载页面后淡出成功消息

How to fade in and out a success message after page reload with jQuery?

本文关键字：加载 消息 成功 淡出 jQuery 新加载      更新时间：2023-10-26

我搜索了很多这个主题，得到了很多不同的回复，但都不适合我。

我有一个表单，当它成功提交时，会重新加载页面。

$('form').on('submit', function(event){
if($('#input').val() == 0){
    alert("Please insert your name");
    event.preventDefault();
  }
}

现在，在每次成功提交时，我都希望一条成功消息在顶部滑动，停留2秒，然后淡出。

我试过了，但是，在页面重新加载后，它不会停留。

else{
     $('.success_message').fadeIn(1500);   
  }

这在纯jQuery中可能吗？

此外，我不想寻找重新加载页面的方法。提交表单后，页面会自动重新加载。

提交表单后，在localStorage中设置一个值，指示成功消息应淡出：

$('form').on('submit', function(event) {
  if ($('#input').val() == 0){
    alert("Please insert your name");
    event.preventDefault();
  }
  localStorage.fadeInSuccessMessage = "1"
});

然后检查localStorage中是否存在该值。如果是，则淡入消息并删除localStorage:中的值

if ("fadeInSuccessMessage" in localStorage) {
  $('.success_message').fadeIn(1500);
  delete localStorage.fadeInSuccessMessage;
}
相关文章：