Wie kann ich ein "a" -Element bei einem Mausklick vor der Weiterleitung animieren?

Question

Ich habe eine Navigation (class = "menu-js-nav") und jedes Element (a) ist ein Link zu einer anderen Website. Ich möchte das 'a' Element per Mausklick animieren und wenn die Animation beendet ist, sollte der Browser die Webseite des angeklickten 'a' Elements öffnen.

Also habe ich versucht, Standard zu verhindern, dann machen Sie die Animation. Jetzt muss ich die Standardaktion ausführen, die verhindert wurde. Ich habe mehrere Möglichkeiten ausprobiert, aber ich wurde immer ohne Animation auf den Link umgeleitet. Wie soll ich den Code schreiben, um zu sagen, dass ich (nach einem Mausklick) zuerst die Animation von 'a' machen möchte und NACH dem ich auf eine gewünschte Webseite umgeleitet werden möchte?

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

Gemäß jquery documentation animate Unterstützung einen Funktionsaufruf in vollständigen Abschnitt.

Also nur eine Funktion im gesamten Teil belebter machen Link

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