Activer div quand un autre est terminé

Question

Ce que j'essaie de réaliser, c'est que lorsque j'appuie sur un bouton, une ligne verticale apparaît qui commence à un point et se termine après un px (aléatoire). Cela fonctionne.

Lorsque cet événement est terminé, je veux qu'un cercle apparaisse en dessous, cela fonctionne un peu sauf que le cercle apparaît dès que j'appuie sur le bouton et non lorsque la ligne verticale est complètement chargée.

Pour plus de clarté, je veux que le cercle apparaisse lorsque la ligne verticale est à sa fin. Merci!

$(document).ready(function(){ 
$('.name-box').click(function(){ 
    $('.verti-line').animate({ height: '220px' }, 2000); 
    $('.circle').show(); 
}); 

});

Cordialement, Viktor!

Answer 1

$('.name-box').click(function(){ 
    $('.verti-line').animate({ height: '220px' }, 2000, function(){ 
     $('.circle').show(); 
    }); 
}); 

Vous pouvez transmettre une fonction en tant que paramètre à utiliser en tant que rappel. Cela lancera la méthode du cercle show lorsque l'animation sera terminée.

Answer 2

animer ont une fonction complete. Pour l'appeler, il suffit d'écrire:

$('.verti-line').animate({ height: '220px' }, {duration : 2000, complete : function(){$('.circle').show();}}); 

Lorsque l'animation est terminée, le cercle s'affiche!

Answer 3

A partir des documents jQuery pour l'animation, . Donc, quelque chose comme ça:

$(document).ready(function(){ 
$('.name-box').click(function(){ 
    $('.verti-line').animate({ height: '220px' }, 2000, function() { 
     $('.circle').show(); 
    }); 
});