miałem dodać animację, że po kliknięciu dodaje wszystkim divom klasę (animacja na transition, że obraca główne divy o 180 stopni, że po obróceniu jest jednolity kolor strony) a po wykonaniu się tej akcji przekierowuje pod adres strony.
Oto kod:
//cut href to data-oldhref (we redirect after animation) $("#mainmenu .desktopmenu .sub-menu .menu-item a:not(.close), #mainmenu .desktopmenu .logo a").each(function() { $(this).attr("data-oldhref", $(this).attr("href")); //$(this).removeAttr("href"); }); $("#mainmenu .desktopmenu a:not(.close)").removeAttr("href"); //animation in mainmenu before click link (flip effect) $("#mainmenu .desktopmenu .sub-menu .menu-item a:not(.close), #mainmenu .desktopmenu .logo a").click(function() { if ($(this).attr("data-oldhref") != "#") { //add class animate $("#mainmenu .card").eq(0).addClass("animate"); $("#mainmenu .card").eq(4).addClass("animate"); setTimeout(function() { $("#mainmenu .card").eq(1).addClass("animate"); $("#mainmenu .card").eq(5).addClass("animate"); }, 50); setTimeout(function() { $("#mainmenu .card").eq(2).addClass("animate"); $("#mainmenu .card").eq(6).addClass("animate"); }, 100); setTimeout(function() { $("#mainmenu .card").eq(3).addClass("animate"); $("#mainmenu .card").eq(7).addClass("animate"); }, 150); //redirect after animation var object = $(this); window.setTimeout(function() { window.location = $(object).attr("data-oldhref"); }, 250); } });
Zasada działania jest prosta - przenosi z href do data-oldhref (by link nie działał po klniknięciu), dodanie akcji po kliknieciu ze doje kasę animate do diva (w odpowiedniej kolejności wykonują się po kolei stąd settimeout) a gdy juz sie wykonają animacje (czyli po 250ms) to przekierowuje na adres zawarty w data-oldhref.
Wszytko ładnie działa, ale na Mozilli i Safari, gdy powrocimy do poprzedniej strony (strzałeczka w lewo w przeglądarce) to wyświetla stronę po animacji (w tym przypadku jednolity kolor - taki jak po wykonaniu powyższego skryptu z klasą animate), gdzie w Chrome po powrocie strona jest ładowana od nowa (także wszystko działa). Jak temu zaradzić?
Znalazłem rozwiązanie tutaj:
http://stackoverflow.com/questions/2638292...script-wont-run
Wystarczyło dać ten kod, gdzie dodatkowo dorzuciłem przeładowanie strony, także wczytuje się od nowa
$(window).bind("pageshow", function(event) { if (event.originalEvent.persisted) { location.reload(); } });