使用jQuery重新加载页面后如何淡入和淡出成功消息？答案

【问题标题】：How to fade in and out a success message after page reload with jQuery?使用jQuery重新加载页面后如何淡入和淡出成功消息？
【发布时间】：2016-03-31 19:58:19
【问题描述】：

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

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

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

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

我试过了，但是在页面重新加载后它并没有保留。

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

这在纯 jQuery 中可能吗？

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

【问题讨论】：

如果您不通过 Ajax 发送表单，则必须使用后端语言打印成功消息。
是的，但是，这不起作用，我无法使用来自后端语言的成功消息
好的，不过我在这附近见过很多

标签： javascript jquery html css

【解决方案1】：

提交表单后，在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;
}

【讨论】：