Javascript-форум - Помогите решить небольшую задачу

Добрый день, помогите решить задачу небольшую.
Буду очень вам признателен!

Есть код который после клика по ссылке задерживает перенаправление страницы на 30 секунд.
Во время этих 30 секунд идет показ 3х блоков.

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

Помогите пожалуйста.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />

<style>
abbr {display: none;}
</style>

</head>
<body>


<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script>
jQuery(function($) {
$(".button7").on("click", function(e) {
e.preventDefault();
$(this).delay(30000).queue(function() {
location.href = this.getAttribute("href");
})
$("abbr").show(200)
})
});
</script>
  
    
  
<script type="text/javascript">
setTimeout(function(){$('.webo4ka').fadeOut('fast')},10000); 
</script>
<script type="text/javascript">
setTimeout(function(){$('.webo4ka2').fadeIn('fast')},10000); 
</script>  

<script type="text/javascript">
setTimeout(function(){$('.webo4ka2').fadeOut('fast')},20000); 
</script>

<script type="text/javascript">
setTimeout(function(){$('.webo4ka3').fadeIn('fast')},20000); 
</script>   


  
<abbr><div class="webo4ka">1 блок </div> 
<div class="webo4ka2" style="display: none;">2 блок </div>
<div class="webo4ka3" style="display: none;">3 блок </div></abbr>

  
<div><a href="/test.php" class="button7"> Ссылка </a></div>


</body>
</html>