Question

我在下面找到了JSFiddle代码，当我完全复制并粘贴到html文档中时，它不起作用。我正在使用Chrome。并且Javascript控制台说有语法错误，但我没有看到任何内容。我不明白为什么这不起作用。

JSFiddle（工作）

非工作复制和粘贴（当我将鼠标悬停在Div上时，警报无法启动）

<!DOCTYPE html>
<meta charset="UTF-8">
<title>fun</title>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>




<a id="animationTest">Hover over me</a>



<!--CSS-->
<style>
#animationTest {
            width: 150px;
            text-align: center;
            display: block;
            padding: 20px;
            background: #000;
            color: #fff;
            border-bottom: 10px solid red;
            cursor: pointer;
                    transition: border-bottom 0.5s linear; /* vendorless fallback */
                   -o-transition: border-bottom 0.5s linear; /* opera */
                -ms-transition: border-bottom 0.5s linear; /* IE 10 */
               -moz-transition: border-bottom 0.5s linear; /* Firefox */
            -webkit-transition: border-bottom 0.5s linear; /*safari and chrome */
        }

        #animationTest:hover {
            border-bottom: 10px solid blue;
        }
</style>

<!--Javascript -->
<script>

var animationTest = document.getElementById('animationTest');

animationTest.addEventListener('webkitTransitionEnd', function(){
    alert("Finished animation (listener)!");
    console.log("Finished animation (listener)!");
});

$('#animationTest').bind("webkitTransitionEnd", function(){
    alert("Finished animation (bind)!");
    console.log("Finished animation (bind)!");
});


</script>

Answer 1

好的找到了你的问题，你在

之前的最后两行得到了无效的字符

$('#animationTest').bind("webkitTransitionEnd", function(){
    alert("Finished animation (bind)!");
    console.log("Finished animation (bind)!");
});
-->HERE
-->HERE

所以删除这两行。

触发Javascript警报的CSS3动画不起作用

1 个答案: