Моя CSS анимация не работает - PullRequest
Новая
       34

Моя CSS анимация не работает

0 голосов
/ 09 июня 2018

Я пытаюсь сделать анимацию и пошел искать некоторые коды.На «codepen.io» это работает, но когда я применяю его к своему коду, анимация не работает.По сути, я хочу щелкнуть небольшое изображение Делора, и машина просто движется горизонтально вправо, а затем с помощью сценария я могу отложить гиперссылку, пока она не достигнет боковой части страницы.Я также использовал скрипт для изменения изображения при наведении, поэтому я не знаю, что-нибудь конфликтует.Сценарии задержки и опции наведения работают, но я не могу заставить работать другой.Кто-нибудь может мне помочь?

Я использовал эти коды: 

<script>
$(function(){
  $("#delorean").on({
   mouseenter: function(){
    $(this).attr('src','delorean-hover.jpg');
  },
  mouseleave: function(){
    $(this).attr('src','delorean.jpg');
  }
  });

});
</script>

<script>
$('.box').click(function() {
  $('.transform').toggleClass('transform-active');
});
</script>

<script>
function delay (URL) {
    setTimeout( function() { window.location = URL }, 600 );
}
</script>
.nav2 {
	height: 100vh;
	width: 300px;
	display: inline-block;
	position:absolute;
	z-index: 1;
}

.box {
	height:50px;
	float:left;
}

.transform {
	-webkit-transition: all 2s ease;
	-moz-transition: all 2s ease;
	-o-transition: all 2s ease;
	-ms-transition: all 2s ease;
	transition: all 2s ease;
	margin-top: 35vh;
	margin-left:11vw;
}

.transform-active {
	margin-top: 35vh;
	margin-left:110vw;
}
 <div class="nav2"><a href="javascript:delay('URL')"><img src="delorean.jpg" class="box transform" id="delorean"></a>
  </div>

Заранее спасибо за ваше время!

1 Ответ

0 голосов
/ 09 июня 2018

Вы никогда не должны ставить теги script над body, если только вы не используете чей-либо скрипт, и они специально не скажут вам.

Вы должны поместить их внизуbody.Это происходит потому, что когда script теги анализируются браузером до body, ни один из сценариев не распознает ни один из элементов в теле, и поэтому в вашем случае они не могут на самом деленайдите DeLorean, чтобы иметь возможность регистрировать клики по нему!Он еще не загружен.

Переместите теги script в конец body, и он должен работать.

...