为什么 jquery 不起作用？

Question

我按照教程创建了一个简单的网页。这是 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>

为什么当我将鼠标放在 "red"、"yellow" 等对象区域时，没有任何反应。所有 js 文件的路径都是正确的。

Answer 1

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

Answer 2

请将此函数 $("li").mouseover(function(){

中的 . 替换为 ,

而不是：

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

应该是：

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

Answer 3

把你的脚本放在你的 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>

Answer 4

您的代码中有两个错误，您的代码没有得到 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。

为什么 jquery 不起作用？

Why doesn't jquery work?

javascript

jquery

animation

css-animations

jquery-animate