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警报不起作用

回答

相关问题