Question

我正在尝试制作动画，然后我去搜索一些代码。在“codepen.io”它工作，但当我适用于我的代码时，动画不起作用。基本上我想点击一个小的DeLorean图像，汽车只是向右水平移动然后，用脚本，我可以延迟超链接，直到它到达页面的一侧。我还使用脚本来改变悬停时的图像，所以我不知道是否有任何冲突。延迟和悬停选项的脚本正在运行，但我不能让另一个工作。有人可以帮帮我吗？

我使用了这些代码：

<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>

提前感谢您的时间！

Answer 1

除非您使用其他人的脚本并且他们明确告诉您，否则不应将script标记放在body之上。

你应该把它们放在body的底部。这是因为，当script之前浏览器解析body标记时，没有任何脚本识别正文中的任何元素，因此在您的情况下他们实际上找不到DeLorean能够在其上注册点击！它还没有加载。

将script标记移到body的底部，它应该有效。

我的CSS动画无效

1 个答案: