Я хочу анимировать индикатор выполнения после нажатия ссылки. Вот HTML:
<a class="link" href="#">Click Me</a>
<br>
<div class="progress">
<div class="meter meter1"></div>
</div>
<br>
<div class="progress">
<div class="meter meter2"></div>
</div>
И прилагаемый CSS:
.progress{
width: 300px;
height: 20px;
background: #c4c4c4;
}
.meter{
height: 20px;
background: #000;
width: 0%;
}
Код jQuery, который я написал, выглядит следующим образом:
$.('.link').click(function(){
$('.meter1').animate({width:'80%'}, 3000, 'swing');
$('.meter2').animate({width:'70%'}, 3000, 'swing');
});
Хотя, если я удалю событие click и просто загружу страницу, анимации будут работать. Как я могу сделать их ожившими после нажатия ссылки?