Активировать div, когда другой выполнен

Question

То, что я пытаюсь достичь, заключается в том, что когда я нажимаю кнопку, появляется вертикальная линия, которая начинается с одной точки и заканчивается после (случайного) px. Это работает.

Когда это событие выполнено, я хочу, чтобы под ним отображался круг, он работает, за исключением того, что круг появляется, как только я нажимаю кнопку, а не когда вертикальная линия полностью загружена.

Для пояснения, я хочу, чтобы круг появлялся, когда вертикальная линия находится на своем конце. Благодаря!

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

});

С уважением, Виктор!

Answer 1

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

Вы можете передать функцию в качестве параметра для использования в качестве обратного вызова. После завершения анимации будет запущен метод отображения круга.

Answer 2

aimate имеют функцию complete. Чтобы называть это, вам просто нужно написать это:

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

Когда анимация будет завершена, круг покажет!

Answer 3

Из документов jQuery для анимации, . Так что-то вроде этого:

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