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/

的示例

Answer 2

我认为您必须使用 document.ready 功能替换上一页的页面更改功能。

$(document).ready(function() { ('#loader').hide(); });

感谢

表单提交后隐藏动画

2 个答案: