将类添加到< html>在链接上单击并添加延迟重定向(淡出页面) [英] Add class to <html> on link click and add delay Redirection (fade out page)
问题描述
我正在尝试添加页面过渡.使用WebFont Loader和CSS动画来完成fadeIn过渡.我想要的是在链接单击时将一个类添加到html标记中，并等待1秒钟(对于CSS fadeOut动画)，然后重定向到该链接.
I'm trying to add page transitions. The fadeIn transition is done using the WebFont Loader and CSS animations. What I want is to add a class to the html tag on link click and wait 1 second (for the CSS fadeOut animation), then redirect to the link.
这是此jQuery代码:
$(document).ready(function() {
$("a").click(function(event){
event.preventDefault();
redirectLink = this.href;
$("body").fadeOut(1000, redirectToLink);
});
function redirectToLink() {
window.location = redirectLink;
}
});
我已经对其进行了自定义，但是我相信.delay(1000, redirectToLink)存在问题，并且无法正常工作.我对JS不太了解，所以非常感谢您的帮助.
I have customized it, but I believe there's a problem with .delay(1000, redirectToLink) and it's not working. I don't have much knowledge of JS, so I would really appreciate your help.
$(document).ready(function() {
$("a").click(function(event){
event.preventDefault();
redirectLink = this.href;
$("html").addClass('wf-next').removeClass('wf-active wf-inactive wf-loading').delay(1000, redirectToLink);
});
function redirectToLink() {
window.location = redirectLink;
}
});
推荐答案
.delay()用于动画，但是您已将动画移至CSS过渡.我会这样使用setTimeout:
.delay() is meant to be used with animations, but you've moved the animation to a css transition. I would use setTimeout instead like this:
$(document).ready(function() {
$("a").click(function(event){
event.preventDefault();
redirectLink = this.href;
$("html").addClass('wf-next').removeClass('wf-active wf-inactive wf-loading');
setTimeout(function(){
redirectToLink(redirectLink);
}, 1000);
});
function redirectToLink(url) {
window.location = url;
}
});
这篇关于将类添加到< html>在链接上单击并添加延迟重定向(淡出页面)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
