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

問題が見つかりました。前の最後の 2 行に無効な文字がありました

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

したがって、この 2 行を削除します。

于 2012-08-10T08:35:16.303 に答える