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

jQuery Animate - No animation when the page refreshes

本文关键字：动画 刷新 Animate -页 jQuery      更新时间：2023-09-26

我在iPad Mini (Safari)上使用jQuery动画时遇到了问题。

当按钮被点击时，我运行下面的动画:

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

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

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

如果你加上return false;并阻止页面重新加载。

有什么方法可以解决这个问题吗?我试过CSS3动画，得到同样的问题。

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

谢谢!

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

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

也许你正在寻找这样的东西:

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

预览
$(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 
    });
 });

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

假设这是一个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);
});
相关文章：