CSS3動畫觸發Javascript警報不起作用

我發現下面的JSFiddle代碼，當我做一個精確的複製並粘貼到一個HTML文檔中，它不起作用。我正在使用Chrome。和Javascript控制檯說有一個語法錯誤，但我什麼也沒有看到。我不明白爲什麼這不起作用。CSS3動畫觸發Javascript警報不起作用

的jsfiddle（工作）

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

非工作拷貝和粘貼（當我將鼠標懸停在股利警報不啓動）

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

來源

2012-08-10 William

好找到了你的問題，在最後兩行中有無效字符

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

因此刪除這兩行。

來源

2012-08-10 08:35:16

沒有骰子。我其實早些時候嘗試過。我現在再試一次，只是爲了仔細檢查。 – William 2012-08-10 08:37:34

什麼是日誌？導致你所描述的可以通過修改小提琴選項'onLoad'到'no wrap（Head）'來完成，這就是你對你的代碼所做的事情。 – 2012-08-10 08:43:39

您也可能想要創建一個良好的HTML結構與,,標籤 – 2012-08-10 08:46:31

CSS3動畫觸發Javascript警報不起作用

回答

相關問題