爲什麼jQuery不工作？

-2

我按照教程創建了一個簡單的網頁。這裏是HTML的一部分：爲什麼jQuery不工作？

$(document).ready(function() { 
 
     //when fucking mouse rolls over 
 
     $("li").mouseover(function() { 
 
     $(this).stop().animate({ 
 
      height: '150px' 
 
     }, { 
 
      queue: false.duration: 600, 
 
      easing: 'easeOutBounce' 
 
     }) 
 
     }); 
 
     //when mouse went away 
 
     $("li").mouseout(function() { 
 
      $(this.stop().animate({ 
 
       height: '50px' 
 
      }, { 
 
       queue: false, 
 
       duration: 600, 
 
       easing: 'easeOutBounce' 
 
      }) 
 

 
      }); 
 
     });

body { 
 
    font-family: "Lucida Grande", arial. sans-serif; 
 
    background: #f3f3f3; 
 
} 
 

 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
li { 
 
    width: 100px; 
 
    height: 50px; 
 
    float: left; 
 
    color: #191919; 
 
    text-align: center; 
 
    overflow: hidden; 
 
} 
 

 
a { 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 

 
p { 
 
    padding: 0px 5px; 
 
} 
 

 
.subtext { 
 
    padding-top: 15px; 
 
} 
 

 
.green { 
 
    background: #6AA63B; 
 
} 
 

 
.yellow { 
 
    background: yellow; 
 
} 
 

 
.red { 
 
    background: #D52100; 
 
} 
 

 
.purple { 
 
    background: #5122B4; 
 
} 
 

 
.blue { 
 
    background: #0292c0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
 

 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 
    <title> Does this suit for title</title> 
 
    <link rel="stylesheet" href="animate-menu.css"> 
 
    <script src="js/jquery.easing.1.3.js"></script> 
 
    <script src="njmt-menu.js"></script> 
 
</head> 
 

 
<body> 
 
    <p>Rollover a menu item to expand it</p> 
 
    <ul> 
 
    <li class="green"> 
 
     <p><a href="#">Home</a></p> 
 
     <p class="subtext">The front page</p> 
 
    </li> 
 
    <li class="yellow"> 
 
     <p><a href="#">about</a></p> 
 
     <p class="subtext">more info</p> 
 
    </li> 
 
    <li class="red"> 
 
     <p><a href="#">contact</a></p> 
 
     <p class="subtext">get in touch</p> 
 
    </li> 
 
    <li class="blue"> 
 
     <p><a href="#">SBMT</a></p> 
 
     <p class="subtext">Send us your Mary Jane</p> 
 
    </li> 
 
    <li class="purple"> 
 
     <p><a href="#">TRMS</a></p> 
 
     <p class="subtext">LGLTY</p> 
 
    </li> 
 
    </ul> 
 
</body> 
 

 
</html>

Somewhy當我把鼠標放在「紅色」，「黃色」等對象的面積，沒有任何反應。所有到js文件的路徑都是正確的。

來源

2017-07-22 NiHao92

您在查找輸出時是否檢查您的控制檯...？ –

@RohitSharma是的，但沒有其他的 – NiHao92

@ 31piy感謝您的更新，這是得到像「你已經包括jquery兩次」的答案。 –

有你的代碼中有兩處錯誤，你的代碼沒有得到jQuery.easing.js 。看看這裏：

$(document).ready(function() { 
 
    //when fucking mouse rolls over 
 
    $("li").mouseover(function() { 
 
     $(this).stop().animate({ 
 
      height: '150px' 
 
     }, { 
 
      queue: false, //removed . and added , after queue: false 
 
      duration: 600, 
 
      easing: 'easeOutBounce' 
 
     }) 
 
    }); 
 
    //when mouse went away 
 
    $("li").mouseout(function() { 
 
     $(this).stop().animate({ //added) after $(this 
 
      height: '50px' 
 
     }, { 
 
      queue: false, 
 
      duration: 600, 
 
      easing: 'easeOutBounce' 
 
     }); 
 
    }); 
 
});

body { font-family: "Lucida Grande", arial. sans-serif; background: #f3f3f3; } 
 
ul { margin: 0; padding: 0; } 
 
li { width: 100px; height: 50px; float: left; color: #191919; text-align: center; overflow: hidden; } 
 
a { color: #fff; text-decoration: none; } 
 
p { padding: 0px 5px; } 
 
.subtext { padding-top: 15px; } 
 
.green { background: #6AA63B; } 
 
.yellow { background: yellow; } 
 
.red { background: #D52100; } 
 
.purple { background: #5122B4; } 
 
.blue { background: #0292c0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script> 
 

 
<!-- added cdn directly for jquery.easing.js --> 
 
<p>Rollover a menu item to expand it</p> 
 
<ul> 
 
\t <li class = "green"> 
 
\t \t <p><a href="#">Home</a></p> 
 
\t \t <p class="subtext">The front page</p> 
 
\t </li> 
 
\t <li class = "yellow"> 
 
\t \t <p><a href="#">about</a></p> 
 
\t \t <p class="subtext">more info</p> 
 
\t </li> 
 
\t <li class = "red"> 
 
\t \t <p><a href="#">contact</a></p> 
 
\t \t <p class="subtext">get in touch</p> 
 
\t </li> 
 
\t <li class = "blue"> 
 
\t \t <p><a href="#">SBMT</a></p> 
 
\t \t <p class="subtext">Send us your Mary Jane</p> 
 
\t </li> 
 
\t <li class = "purple"> 
 
\t \t <p><a href="#">TRMS</a></p> 
 
\t \t <p class="subtext">LGLTY</p> 
 
\t </li> 
 
</ul>

你可以看到工作fiddle here。

來源

2017-07-22 06:32:38

仍然無效 – NiHao92

@ NiHao92更新的答案...！ –

即使編輯不起作用 – NiHao92

您是否試圖檢查控制檯是否有任何錯誤消息？好像你錯誤地輸入「JS/jquert.easing.1.3.js」它應該是「JS/jquery.easing.1.3.js」

來源

2017-07-22 06:21:18

我編輯它，但不是更好 – NiHao92

請,這個函數替換.$("li").mouseover(function(){

代替：

{queue:false. duration:600, easing:'easeOutBounce'})

應該是：

{queue:false, duration:600, easing:'easeOutBounce'})

來源

2017-07-22 06:25:16

沒有改變任何東西 – NiHao92

把你的腳本，你的身體標記內，你調用jQuery腳本兩次刪除，然後再試一次，有時這些不當的初始化可能是這個原因

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title> Does this suit for title</title> 
    <link rel="stylesheet" href="animate-menu.css"> 

    <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script> 
    <script src="js/jquert.easing.1.3.js"></script> 
    <script src="njmt-menu.js"></script> 
</head> 

<body> 
    <p>Rollover a menu item to expand it</p> 
    <ul> 
    <li class="green"> 
     <p><a href="#">Home</a></p> 
     <p class="subtext">The front page</p> 
    </li> 
    <li class="yellow"> 
     <p><a href="#">about</a></p> 
     <p class="subtext">more info</p> 
    </li> 
    <li class="red"> 
     <p><a href="#">contact</a></p> 
     <p class="subtext">get in touch</p> 
    </li> 
    <li class="blue"> 
     <p><a href="#">SBMT</a></p> 
     <p class="subtext">Send us your Mary Jane</p> 
    </li> 
    <li class="purple"> 
     <p><a href="#">TRMS</a></p> 
     <p class="subtext">LGLTY</p> 
    </li> 
    </ul> 
<script 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="js/jquert.easing.1.3.js"></script> 
    <script src="njmt-menu.js"></script> 
</body> 
</html>

來源

2017-07-22 06:32:37

這沒有幫助 – NiHao92

不要混淆OP的原始代碼與添加jquery兩次的編輯。 –

爲什麼jQuery不工作？

回答

相關問題