我有一个导航 (class="menu-js-nav"),每个项目 (a) 都是指向不同网站的链接。我想在鼠标单击时为“a”元素设置动画,当动画完成时,浏览器应该打开所单击的“a”元素的网站。
所以,我尝试阻止默认,然后制作动画。现在我需要执行被阻止的默认操作。我尝试了多种方法,但总是被重定向到没有任何动画的链接。我应该如何编写代码来表示(单击鼠标后)首先我想要制作“a”项目的动画,然后我想要重定向到所需的网站?
$('.menu-js-nav a').on('click', function(e) {
e.preventDefault();
$(this).addClass('spinner').css({
position: 'relative'
}).animate({
left: 150
}, 1000).animate({
top: -1000
}, 1000);
});
最佳答案
根据 jquery documentation animate 支持完整部分的函数调用。
所以只需在 animate 的完整部分中制作链接打开函数即可
$('.menu-js-nav a').on('click', function(e) {
e.preventDefault();
link_to = $(this).attr('href');
$(this).addClass('spinner').css({
position: 'relative'
}).animate({
left: 150
}, 1000).animate({
top: -1000
}, 1000, function(){
//open your link here
window.location.href = link_to;
});
});
关于javascript - 在重定向之前,如何在鼠标单击时为 'a' 元素设置动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42278846/