2016-08-19 73 views
-1

我的jquery不在我爲我的一些學生做的簡單項目中工作。我有一個以前的項目,我剛剛運行,工作得很好。問題是,當我點擊div(只有一個)沒有任何反應,它應該滑動。任何幫助將被支持。jquery .animate不工作在我的HTML

<!DOCTYPE html> 
<html> 
<head>  
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> 
     $(document).ready(function(){ 
      $("#frog").click(function() { 
       $("#frog").animate({height: "20px"}, 500); 
      }); 
     }); 
    </script> 
    <style type="text/css"> 
     #frog{ 
      width: 100px; 
      height: 100px; 
      background-color: red; 
      position: relative; 
      left: 10px; 
     } 
    </style> 
    <title>I hate JS!</title> 
</head> 

<body> 
    <ul> 
     <h2>Programming Languages</h2> 
     <li>Python</li> 
     <li>Javascript</li> 
     <li>C++</li> 
     <li>C#</li> 
     <li>ruby</li> 
    </ul> 
    <ol> 
     <h2>Top 3 Best Animations</h2> 
     <h4><li>Slide</li></h4> 
    </ol> 
    <div id="frog"></div> 
</body> 

</html> 

回答

1

script標籤既有src內容:

<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> 
    $(document).ready(function(){ 
     $("#frog").click(function() { 
      $("#frog").animate({height: "20px"}, 500); 
     }); 
    }); 
</script> 

每HTML specifications,它可以有一個其他,但不能兩者兼得。將其分爲兩個元素:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#frog").click(function() { 
      $("#frog").animate({height: "20px"}, 500); 
     }); 
    }); 
</script>