Как заставить функцию JQuery setTimeout () работать после перехода страницы в swup или другие библиотеки?
У меня есть
index.html
с некоторыми анимациями с использованием
setTimeout
функцию и ссылку на
about.html
. я использую
swup
для перехода между страницами. Но когда я перееду в
about.html
затем вернись к
index.html
ничего не произошло. Потому как
setTimeout
снова не сработало. Есть ли способ сделать
setTimeout
работают даже после перехода страницы??
Вот мой
js
код:
//page transition using swup
const swup = new Swup();
$(document).ready(function () {
$(document).on("click", ".link a", function (e) {
$(this).parent().addClass("active");
$(this).parent().siblings().removeClass("active");
});
const textSpans = document.querySelectorAll(".my-text span");
textSpans.forEach(span => span.addEventListener('mouseenter', function (e) {
span.classList.add('animated', 'rubberBand')
}))
textSpans.forEach(span => span.addEventListener('mouseleave', function (e) {
setTimeout(() => {
span.classList.remove('animated', 'rubberBand');
}, 500);
}))
setInterval(() => {
delay = 0;
$(".my-text span").each(function (index, element) {
setTimeout(() => {
$(element).addClass("animated pulse");
}, delay);
delay += 40;
setTimeout(() => {
$(element).removeClass("animated pulse");
}, 1800);
});
}, 3000);
delay = 0;
$(".laptop-codes span").each(function (i, elem) {
setTimeout(() => {
$(elem).css("display", "initial");
}, delay);
delay += 20;
});
setTimeout(() => {
$(".key-buttons .enter-key").css("background", "#ff5722");
setTimeout(() => {
$(".key-buttons .enter-key").css("background", "#38384b55");
$(".laptop-con").addClass("laptop-transform");
}, 100);
}, 2200);
setTimeout(() => {
$(".my-text").fadeIn(3000);
}, 3000);
setTimeout(() => {
$(".laptop-con .laptop-icon").css("transform", "rotate(-15deg)");
}, 3500);
$(document).on("click", ".key-buttons p", function (e) {
e.preventDefault();
$(".laptop-con .laptop-icon").toggleClass("laptop-rotate");
});
});