Question

我在iPad Mini（Safari）上遇到jQuery动画问题。

单击按钮时运行以下动画：

$('body').on('click', '#submitBtn', function () {
    $('#loadBar').animate({ width: '95%' }, 8000);
});

此按钮发送使页面重新加载的请求。当它开始重新加载时，我想让loadBar动画化。

这不会发生，因为没有动画被触发。

如果你添加return false它会起作用;并停止重新加载页面。

有没有办法解决这个问题。我尝试过CSS3动画并遇到同样的问题。

动画必须与提交事件同时发生。

谢谢！

Answer 1

您可以在动画完成后以js重新加载页面

$('body').on('click', '#submitBtn', function () {
    $('#loadBar').animate({ width: '95%' }, 8000, function(){
        window.location.reload();
    });

    return false;
});

Answer 2

假设它是一个id为“myform”的提交表单：

$('body').on('click', '#submitBtn', function(e) {
    e.preventDefault();
    $('#loadBar').animate({ width: '95%' }, 8000, function() {
        $( "#myform" ).submit();
    });
});

编辑：

检查http://www.w3schools.com/jsref/event_onbeforeunload.asp

中的beforeunload()

$(window).on('beforeunload', function(){
    $('#loadBar').animate({ width: '95%' }, 8000);
});

Answer 3

也许这就是你正在寻找的东西：

http://plnkr.co/edit/2v0s6oIw8jNn8BmoTemi?p=preview

$(function(){
    $('body').on('click', '#submitBtn', function (e) {
      e.preventDefault();

      $('#loadbar').animate({ width: '95%' }, 8000);
      setTimeout(function(){ //remove this line
        $("#form").submit();
      }, 5000); //simulate slow loading page. remove this line 
    });
 });

这里的想法是你阻止浏览器的默认行为，强制它动画，然后继续提交。

jQuery Animate - 页面刷新时没有动画

3 个答案: