2016-08-19 1 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> 

, 그것은 모두 하나 또는 다른,하지만이있을 수 있습니다. 두 요소로 분리하십시오.

<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> 
관련 문제