Hoe voer ik code in jQuery uit nadat vorige (onbekende) animatie/effect is voltooid?

Ik wil een DIV-element verbergen nadat de vorige effecten/bewegingen zijn voltooid. Als ik de reeks zou kennen, zou ik gewoon code kunnen toevoegen aan de callback-functie die ik aan .anim() (bijvoorbeeld) geef. In deze situatie heb ik echter geen toegang tot die staat (het kan wel of niet gaan door een animatie/effect). Dus de twee animaties/effecten worden geactiveerd door twee verschillende gebeurtenissen (bijvoorbeeld klikken op knoppen).

Dus zou ik fadeOut uitvoeren nadat het DIV-element de huidige animatie/effect heeft voltooid. Is dit mogelijk met jQuery?

Bedankt.

EDIT: Dus het doel is om de huidige actie (bijvoorbeeld fadeOut ()) code te ontkoppelen van de vorige animatiecode.

EDIT2: maakte de vraag duidelijker.

0
Waarom heb je geen toegang tot de reeks? Ook, wat laat je zijn jQuery zeggen en niet zeggen, een CSS3-animatie?
toegevoegd de auteur Joey, de bron
@JoeyVanOmmen Ik weet dat het jQuery is omdat ik het heb geschreven :). Het probleem is dat de vorige animatie wordt geactiveerd vanaf een andere gebeurtenis dan de volgende (bijvoorbeeld twee afzonderlijke knopklikken).
toegevoegd de auteur Lycha, de bron

5 antwoord

Bel gewoon .fadeOut() en het wordt automatisch toegevoegd aan het einde van de fx-wachtrij:

http://jsfiddle.net/gilly3/f4vNH/

2
toegevoegd
Bedankt, ik wist niet dat jQuery dat kan, dit lost het op. Ik zou meer moeten lezen over de fx-wachtrijen.
toegevoegd de auteur Lycha, de bron
En bovendien kan ik de .fadeOut() een terugroepactie geven om na de fadeOut extra code uit te voeren.
toegevoegd de auteur Lycha, de bron

Hoe zit het met het maken van een aangepast evenement en het verbinden met live ()?

<script>
$("p").live("myCustomEvent", function(e, myName, myValue) {
  $('#div').hide();

});
$("button").click(function() {
  $("p").trigger("myCustomEvent");
});
</script>
0
toegevoegd

Je moet ons de vorige animatiecode laten zien om specifiek advies te krijgen. In jQuery kunnen animatie-effecten aan elkaar worden geketend en jQuery zal ze automatisch een voor een in de wachtrij plaatsen. Of u kunt de voltooiingsfunctie van één bewerking gebruiken om het begin van de volgende bewerking te activeren.

Voorbeelden:

$("#item").fadeIn(1000).delay(1000).fadeOut(500);
$("#item").animate({
    opacity: 0.75,
    left: '+=250',
 }, 5000).delay(1000).fadeOut(500);

De methode .anim() heeft ook een voltooiingsfunctie die u kunt gebruiken om elke bewerking te activeren wanneer de animatie is voltooid, maar als de volgende bewerking een animatie zelf is, is het eenvoudiger om de automatische koppeling te gebruiken als boven in plaats van de voltooiingsfunctie:

$("#item").animate({
    opacity: 0.75,
    left: '+=250',
 }, 5000, function() {alert("Animation finished."});
0
toegevoegd

Ik denk dat je op zoek bent naar de volledige functieparameter in de animatie-oproep:

http://api.jquery.com/animate/

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
   //Animation complete.
  });
});
0
toegevoegd

Dat is eenvoudig, wacht maar uw animatie

$("#myDiv").queue(function(){
    $(this).fadeOut();
});

Het wordt uitgevoerd nadat de animatiewachtrij is voltooid. Dus je kunt code toevoegen na de animatiewachtrij en voor je fadeOut en wat dan ook ...

0
toegevoegd