javascript - 在重定向之前，如何在鼠标单击时为 'a' 元素设置动画？

Question

我有一个导航 (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);
});

Answer 1

根据 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;
        });
});