0

我在下面找到了 JSFiddle 代码，当我进行精确复制并粘贴到 html 文档中时，它不起作用。我正在使用 Chrome。并且 Javascript 控制台说存在语法错误，但我什么也没看到。我不明白为什么这不起作用。

JSFiddle（工作）

http://jsfiddle.net/jkUyT/3/

非工作复制和粘贴（当我将鼠标悬停在 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>
4

1 回答 1

1

好的，发现你的问题，你之前的最后两行有无效字符

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

所以删除这两行。

于 2012-08-10T08:35:16.303 回答