I'm facing a challenge with the initial load of my webpage where the header appears in 3 parts slowly and dramatically. On top of that, I have tabs that trigger transitions between different content "pages." The issue arises when a tab is clicked before the initial header animation is completed, causing overlap and messy transitions. I've attempted to use stop() and finish() functions but I'm not entirely sure where they should be placed. My goal is to ensure that when a tab is clicked, the initial animation finishes instantly before triggering any other animations. However, identifying and targeting that specific animation has proven tricky.
Here's the code snippet for the initial header animation:
$.fn.topSlide1 = function() {
setTimeout ( function()
{
$('.part1').delay(1000).animate({ opacity: '1' }, 'slow');
setTimeout (function() {
$('.part2').delay(1000).animate({ opacity: '1'}, 'slow');
setTimeout(function() {
$('.part3').delay(1000).animate({ opacity: '1' }, 'slow');
}, 1100);
}, 1100);
}, 1100);
return this;
}And here's the code snippet for handling tab clicks if the initial page is still displayed:
if (current === '#mag1')
{
/*Stop animation code here??*/
/*Initiates fading away transition*/
$('.part1').animate({ opacity:'0'}, 'slow');
$('.part2').animate({ opacity:'0'}, 'slow');
$('.part3').animate({ opacity:'0'}, 'slow');
$('.bio').fadeDown();
/*Slides up new page*/
$(id).fadeUp();
current = id;
}