2016-08-19 13 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コンテンツの両方があります:HTML specificationsパー

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

を、それが1 または他のではなく、両方を持つことができます。それを2つの要素に分けてください:

<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> 
関連する問題