Как я могу анимировать элемент «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 анимировать поддержку вызова функции в полном разделе.

Так просто сделать ссылку открытия функции в полном составе живой

$('.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; 
     }); 
});