javascript - 表单提交后隐藏动画

Question

我在 div 中有一个始终运行的动画，但默认情况下它是隐藏的。我在 submit 表单上取消隐藏它，但不确定在页面更改时如何将它隐藏回来。这意味着如果用户按下浏览器上的 back 按钮并且页面仍被缓存(因此不会重新加载)，动画仍会显示。我怎样才能解决这个问题？该表单未使用 AJAX。

HTML:

<div id="loader" class="hidden">
    <div id="loop" class="center"></div>
    <div id="plane-wrapper" class="center">
        <div id="bike" class="centerPlane"></div>
    </div>
</div>

JS:

$('#search_form').submit(function(){
    $('#loader').show();
});

我尝试添加

$(document).on( "pagechange", function() {
    ('#loader').hide();
});

但这并没有解决任何问题。

Answer 1

<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">


$( "#clickme" ).click(function() {
  // With the element initially hidden, we can show it slowly:
  $( "#book" ).show( "slow", function() {
    // Animation complete.
  });
});

使用回调 - 来自 http://api.jquery.com/show/ 的示例