Wie ziele ich auf ein jquery-Ereignis ab und beende es, bevor ein anderes startet?

Question

Ich habe eine Webseite, die eine langsame und dramatische Anfangslast hat, wo die Überschrift in 3 Teilen erscheint. Ich habe auch Registerkarten, die bei einem Klick den Inhalt der aktuellen "Seite" entfernen und in den neuen "Seiten" Inhalt übergehen. Wenn also ein Tab angeklickt wird, bevor der anfängliche Header-Übergang beendet ist, überlappen sie sich und die Dinge werden unordentlich. Ich habe versucht, mit stop() und beenden(), aber ich bin mir nicht sicher, wo Sie sie setzen. Ich denke, ich versuche zu sagen, dass wenn eine Registerkarte angeklickt wird, die anfängliche Animation sofort beendet wird, bevor die anderen gestartet werden. Ich bin mir jedoch nicht sicher, wie ich diese Animation ausrichten soll.

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; 
 

 
}

Meine Animation für eine geklickt Registerkarte, wenn die erste Seite ist die eine noch angezeigt wird:

if (current == '#mag1') 
 

 
{ 
 
    /*Stop animation code here??*/ 
 

 
    /*Starts the 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; 
 

 
}

Answer 1

Nur eine Funktion am Ende nennen - wie diese

$('.part1').animate({ 
    opacity: 0 
}, 'slow', function() { 
    //todo if animation finished 
    alert('end'); 
}); 

Answer 2

Da Sie bereits einen Click-Handler haben, sollten Sie in der Lage sein .stop aufrufen, bevor Sie Ihren nächsten Animation starten. Stoppen Sie übernimmt einen Parameter zum Ende der Animation zu springen, so würde ich dies versuchen:

if (current == '#mag1') 

{ 
    /*       clearQueue, jumpToEnd*/ 
    $('.part1, .part2, .part3').stop(true, true); 

    /*Starts the 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; 

} 

jQuery.stop: https://api.jquery.com/stop/

JsFiddle Beispiel: https://jsfiddle.net/rf1y60xz/1/

$(document).ready(function() { 
// Fade in slow 
    $('.move').animate({opacity: 1}, 5000); 
    $('button').on('click', function() { 
     $('.move').stop(true, true); 
    // Fade out, do other things 
    $('.move').animate({opacity: 0}); 
    }) 
}); 

Etwas mehr erfundenes Beispiel , die darauf wartet, dass die Opazitätsanimation beendet wird, und danach eine weitere Box verschiebt.

https://jsfiddle.net/rf1y60xz/2/

$(document).ready(function() { 
// Fade in slow 
    $('.move').animate({opacity: 1}, 5000); 
    $('button').on('click', function() { 
     $('.move').stop(true, true); 
    // Fade out, do other things 
    $('.move').animate({opacity: 0}, function() { 
     $('.move2') 
     .css('opacity', 1) 
     .animate({left: 400}); 
    }); 
    }) 
});