代码之家  ›  专栏  ›  技术社区  ›  Tom

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

  •  1
  • Tom  · 技术社区  · 10 年前

    我搜索了很多这个话题,得到了很多不同的回答,但是,没有一个适合我。

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

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

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

    我试过这个,但是,在页面重新加载后它不会停留。

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

    这在纯jQuery中可能吗?

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

    1 回复  |  直到 10 年前
        1
  •  3
  •   Michał Perłakowski    10 年前

    提交表单后,在 localStorage 指示成功消息应当淡入:

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

    然后检查该值是否存在于 本地存储 。如果是,淡入消息并从中删除值 本地存储 :

    if ("fadeInSuccessMessage" in localStorage) {
      $('.success_message').fadeIn(1500);
      delete localStorage.fadeInSuccessMessage;
    }