Jquery横向伸缩

最新推荐文章于 2021-12-03 08:52:44 发布

伏特加的滋味

最新推荐文章于 2021-12-03 08:52:44 发布

阅读量688

点赞数

本文链接：https://blog.csdn.net/yuanyuan214365/article/details/53333079

版权

jquery的css效果没有体现出来

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>横向伸缩</title>
 </head>
 <body>
      <div id="menudiv">
	  <ul>
	     <li><a href="#"><img src="img/home.jpg" alt="" width="50" height="50" border="0"/></a>Home</li>
         <li><a href="#"><img src="img/portfolio.jpg" alt="" width="50" height="50" border="0"/></a>Portfolio</li>
		 <li><a href="#"><img src="img/about.jpg" alt="" width="50" height="50" border="0"/></a>About</li>
		 <li><a href="#"><img src="img/contact.jpg" alt="" width="50" height="50" border="0"/></a>Contact</li>
	  </ul>
      </div>
	  <script type="text/JavaScript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	  <script>
	     $(document).ready(function(){
		     $("li").mouseover(function(){
			   $(this).stop().animate({
			     width:"152px",},500);
			 });
			 $("li").mouseout(function(){
			   $(this).stop().animate({
			     width:"52px",},500);
			 });
		 });
	  </script>
 </body>
</html>