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>

为什么当我把鼠标放在“红色”，“黄色”等物体区域时，没有任何反应。所有到js文件的路由都是正确的。

Answer 1

您的代码中存在两个错误，而您的代码未获得jQuery.easing.js。看这里：

＆＃13;

$(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'
        });
    });
});

＆＃13;

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

＆＃13;

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

＆＃13;

您可以看到工作fiddle here。

Answer 2

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

Answer 3

请将此.

中的,替换为$("li").mouseover(function(){

代替：

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

应该是：

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

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

为什么jquery不起作用？

4 个答案: