Safari会在重定向/表单提交时暂停所有动画

我有一个动画，点击链接时触发。 这是一个jQuery动画，扩大div然后淡出。 为了确保速度，在单击链接的同一时间，重定向将被触发。 这必须发生，我不能将重定向放在jQuery的animate（）的成功函数中。 此重定向通过表单提交完成。 在Chrome，Firefox和IE上它按预期工作，动画播放，如果页面在动画结束之前完全加载，它会重定向，但动画确实会播放。

在Safari（主要在iPad上测试）上，一旦点击链接，页面就会看似“冻结”并且动画无法执行。 在页面加载时屏幕上还有GIF，如果我在屏幕上显示这些GIF并动画时单击一个链接，它们也会暂停。 我看过一篇post说要设置超时，应用样式，然后提交，但问题是虽然HTML会应用那种CSS样式，但它仍然会冻结屏幕，而且它们不处理动画，只是静态CSS样式。

下面是一些示例代码，用于显示我如何完成此操作的方法（它仅仅是为了说明我的观点而未经过测试，因此可能缺少部分或语法错误）：

var someData = 'foo'; //This value is irrelevant, just there for syntactical consistency. $("#link").on("click", function() { var form = $("
"); form.attr("action", "http://someurl.com"); var input = $(""); input.val(someData); form.append(input); $(document.body).append(form); form.submit(); //Form has been submitted, now run a short animation for the remaining life of the current page $(this).animate({width: "100px", height: "100px", opacity: "0"}, 150); }); 

  
Click Me 

基本上，我需要确保一旦Safari浏览器开始加载新的页面/链接，它就不会停止更新当前页面。 从我所看到的情况来看，这听起来像Safari中的一个问题，但是我已经看到这个问题在网络上也没有遇到过。 有些post处理GIF动画，但这是一个CSS风格的动画。

谢谢你的帮助！

Answer 1

您可以使用setTimeout转到动画后的链接。

 var someData = 'foo'; //This value is irrelevant, just there for syntactical consistency. $("#link").on("click", function() { setTimeout(doThisAfterTimeExpires,2000); $(this).animate({width: "100px", height: "100px", opacity: "0"}, 150); }); function doThisAfterTimeExpires(){ var form = $("
"); form.attr("action", "http://someurl.com"); var input = $(""); input.val(someData); form.append(input); $(document.body).append(form); form.submit(); } 

Answer 2

Safari抱怨它无法找到变量someData ，它试图将输入值设置为不存在的变量值，并停止执行页面JavaScript的那部分。

 [Error] ReferenceError: Can't find variable: someData 

只需像这样创建变量：

 // [snip] var input = $(""); var someData; input.val(someData); // [snip] 

它将在Safari中运行。

Answer 3

在表单提交之前编写动画代码。 一段时间后执行表单提交。 那是：

 var someData = 'foo'; //This value is irrelevant, just there for syntactical consistency. $("#link").on("click", function(e) { //Write your code for animation at first. $(this).animate({width: "100px", height: "100px", opacity: "0"}, 150); //write the code for form submission setTimeout(function() { var form = $("
"); form.attr("action", "http://someurl.com"); var input = $(""); input.val(someData); form.append(input); $(document.body).append(form); form.submit(); }, 1000); });