Safari przerywa animację po przesłaniu przekierowania/formularza

Question

Mam animację, która uruchamia się po kliknięciu łącza. Jest to animacja jQuery, która powiększa element div, a następnie zanika. Aby zapewnić szybkość, w tym samym momencie, w którym kliknięto łącze, przekierowanie jest uruchamiane. To musi się zdarzyć i nie mogę umieścić przekierowania w funkcji sukcesu animacji jQuery's(). To przekierowanie odbywa się poprzez przesłanie formularza. W przeglądarce Chrome, Firefox i IE działa zgodnie z oczekiwaniami, animacja jest odtwarzana i jeśli strona ładuje się całkowicie przed zakończeniem animacji, przekierowuje, ale animacja jest odtwarzana.

W Safari (głównie podczas testów na iPadzie), po kliknięciu łącza strona pozornie "zawiesza się" i animacja nie zostanie wykonana. Są też GIF-y, które są na ekranie podczas ładowania strony, a jeśli kliknę link, gdy te GIF-y są na ekranie i animują, również się zatrzymują. Widziałem post, który mówi, aby ustawić limit czasu, zastosować stylizację, a następnie przesłać, ale problem polega na tym, że chociaż HTML zastosuje ten styl CSS, nadal zamarza na ekranie i nie ma do czynienia z animacją, tylko statyczną stylistyką CSS .

Oto przykładowy kod, aby pokazać sposób, w jaki ja osiągnięcia tego (to nie jest badana po prostu staramy się zilustrować mój punkt widzenia, więc nie mogą być brakujące części lub błędy składniowe):

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>

Zasadniczo muszę się upewnić, że gdy przeglądarka Safari zacznie ładować nową stronę/link, to nie przestanie aktualizować bieżącej strony. To brzmi jak problem w Safari z tego, co widziałem, ale ten problem również nie pojawił się w sieci tak często, jak widziałem. Istnieją posty dotyczące animacji GIF, ale jest to animacja stylu CSS.

Dzięki za pomoc!

Answer 1

Safari skarży się, że nie może znaleźć zmiennej someData, próbuje ustawić wartość wejścia na wartość zmiennej, która nie istnieje i przestaje wykonywać tę część skryptu JavaScript strony.

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

Wystarczy utworzyć zmienną takiego:

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

i będzie działać w Safari.

Answer 2

Możesz użyć funkcji setTimeout, aby przejść do linku po animacji.

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(); 

}