Javascript-форум - Плавное изменение CSS-свойства при нажатии на ссылку

Цитата:

Сообщение от caboke (Сообщение 411736)

Dilettante_Pro, Единственное, что я не понял - почему-то, если тело скрипта находится выше кнопки «добавить», то скрипт не срабатывает. Не знаете, почему?

Вот так скрипт работает и спереди. Скрипт должен активизироваться после загрузки элементов html

<!DOCTYPE html >
<html>
<head>
<title></title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<style type="text/css">

#st {
  border: 5px solid rgba(0, 143, 255, 0.5);
  width: 200px;
  height: 100px;
  border-radius: 10px;
}
.clicked {
  animation: fade-bodred 3s linear;
}
@keyframes fade-bodred {
  0% {
    border-color: rgba(0, 143, 255, .5);
  }
  50% {
    border-color: rgba(255, 0, 0, 1);
  }
  100% {
    border-color: rgba(0, 143, 255, .5);
  }
}

</style>
<script type="text/javascript">
    window.onload = function () {
        $('.in').on('click', function() {
            $('#st').addClass('clicked');
            setTimeout(function() {
                $('#st').removeClass('clicked');
            }, 3000);
      });	
   }
</script>

</head>

<body>

<a class="in" href="#">добавить</a>
<div id="st"></div>



</body>
</html>