Safari приостанавливает всю анимацию при отправке/отправке формы

Question

У меня есть анимация, которая срабатывает при нажатии ссылки. Это анимация jQuery, которая увеличивает div, затем исчезает. Чтобы обеспечить скорость, в то же самое время, когда нажимается ссылка, перенаправление запускается. Это должно произойти, и я не могу перенести перенаправление в функцию успеха анимации jQuery(). Это перенаправление осуществляется посредством отправки формы. В Chrome, Firefox и IE он работает так, как ожидалось, анимация воспроизводится, и если страница загружается целиком до окончания анимации, она перенаправляется, но анимация играет.

В Safari (в первую очередь тестирование на iPad), как только нажимается ссылка, страница, казалось бы, «зависает», и анимация не выполняется. Также есть GIF, которые находятся на экране при загрузке страницы, и если я нажму ссылку, тогда как эти GIF будут на экране и оживить, они также приостанавливаются. Я видел сообщение, в котором говорится, чтобы установить тайм-аут, применить стиль, а затем отправить, но проблема в том, что, хотя HTML будет применять этот стиль CSS, он все равно зависает на экране, и они не имеют дело с анимацией, просто статический стиль CSS ,

Вот несколько примеров кода, чтобы показать способ, как я достичь этого (она не тестировалась просто пытается проиллюстрировать свою точку зрения, так что может быть недостающие части или синтаксические ошибки):

var someData = 'foo'; //This value is irrelevant, just there for syntactical consistency. 
 
$("#link").on("click", function() { 
 
    var form = $("<form method='POST'></form>"); 
 
    form.attr("action", "http://someurl.com"); 
 
    var input = $("<input type='hidden'/>"); 
 
    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); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<div id="link" style="width: 100px; height: 100px; background-color: #FFF">Click Me</div>

По существу, мне нужно убедиться, что, как только браузер Safari начнет загружать новую страницу/ссылку, он не прекратит обновлять текущую страницу. Это звучит как проблема в Safari из того, что я видел, но эта проблема также не встречалась очень часто в Интернете, как я видел. Есть сообщения, касающиеся анимации GIF, но это анимация стиля CSS.

Спасибо за помощь!

Answer 1

Safari жалуется, что не может найти переменную someData, она пытается установить значение ввода в значение переменной, которая не существует, и прекращает выполнение этой части JavaScript страницы.

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

Просто создайте переменную так:

// [snip] 
var input = $("<input type='hidden'/>"); 
var someData; 
input.val(someData); 
// [snip] 

и он будет работать в Safari.

Answer 2

Вы можете использовать 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 method='POST'></form>"); 
    form.attr("action", "http://someurl.com"); 
    var input = $("<input type='hidden'/>"); 
    input.val(someData); 
    form.append(input); 
    $(document.body).append(form); 
    form.submit(); 

}