为什么 jquery 不起作用？答案

【问题标题】：Why doesn't jquery work?为什么 jquery 不起作用？
【发布时间】：2017-07-22 06:14:08
【问题描述】：

我按照教程创建了一个简单的网页。这是html部分：

$(document).ready(function() {
      //when 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>

为什么当我将鼠标放在“红色”、“黄色”等对象的区域时，什么也没有发生。 js文件的所有路由都是正确的。

【问题讨论】：

您在寻找输出时是否在检查控制台...？
@RohitSharma 是的，但是什么都没有
@31piy 感谢您的更新，得到的答案类似于“您已包含 jquery 两次”。

标签： javascript jquery animation jquery-animate css-animations

【解决方案1】：

您的代码中有两个错误，您的代码没有得到jQuery.easing.js。看这里：

$(document).ready(function() {
    //when 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>
	<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>

你可以看到工作fiddle here。

【讨论】：

@NiHao92 更新答案...！
让我们continue this discussion in chat.

【解决方案2】：

您是否尝试过检查控制台是否有任何错误消息？好像你打错了“js/jquert.easing.1.3.js” 应该是“js/jquery.easing.1.3.js”

【讨论】：

【解决方案3】：

请将此函数$("li").mouseover(function(){中的,替换为.

代替：

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

应该是：

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

【讨论】：

没有改变任何东西

【解决方案4】：

将你的脚本放在你的body标签中，你调用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>

【讨论】：

这没有帮助
不要将 OP 的原始代码与两次添加 jquery 的编辑混淆。