我的CSS动画不工作
我的CSS动画不工作
提问于 2018-06-09 08:47:03
我试着做一个动画，我去找了一些代码。在"codepen.io“上它可以工作，但是当我将它应用到我的代码中时，动画就不能工作了。基本上，我想要点击一个小的DeLorean图像，汽车只是水平向右移动，然后，通过一个脚本，我可以延迟超级链接，直到它到达页面的一侧。我还使用了一个脚本来更改悬停时的图像，所以我不知道是否有任何冲突。delay和hover选项的脚本可以工作，但我不能让另一个脚本工作。有人能帮帮我吗？
我使用了以下代码：
<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
Stack Overflow用户
回答已采纳
发布于 2018-06-09 10:48:58
您永远不应该将script标记放在body之上，除非您正在使用其他人的脚本，并且他们明确告诉您要这样做。
你应该把它们放在body的底部。这是因为，当浏览器在body之前解析script标记时，没有一个脚本能够识别正文中的任何元素，因此在您的例子中，它们实际上找不到能够注册点击的DeLorean！它还没有装入。
将你的script标签移到body的底部，它应该可以工作了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50769959
复制相关文章
相似问题
腾讯云开发者
