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>