<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div
{
width: 100px;
height: 250px;
background-color: deepskyblue;
float: left;
}
ul
{
list-style: none;
}
li
{
padding: 5px 20px;
float: left;
background-color: rgba(255,0,0,1);
cursor: default;
}
</style>
<script src="js/jquery-3.2.1.js"></script>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<ul>
<li>首页1</li>
<li>首页2</li>
<li>首页3</li>
<li>首页4</li>
<li>首页5</li>
</ul>
<script>
$("div:last-of-type").click(function () {
$(this).hide(800,function () {
$(this).prev().hide(800,arguments.callee);
})
});
$("li").hover(function () {
$(this).animate({
paddingTop:"10px",
paddingBottom:"10px",
marginTop:"-5px",
opacity:0.4
},300)
},function () {
$(this).animate({
paddingTop:"5px",
paddingBottom:"5px",
marginTop:"0px",
opacity:1
},300)
})
</script>
</body>
</html>