Question

我搜索了很多这个话题并得到了很多不同的答案，但是，这些都没有对我有用。

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

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

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

我试过这个，然而，重新加载页面后它不会停留。

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

纯jQuery可以吗？

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

Answer 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;
}

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

1 个答案: