手风琴特效
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>手风琴</title>
<style type="text/css">
@charset "utf-8";
body,div,ul,li,p{margin: 0;padding: 0;font-family: "微软雅黑";font-size: 12px;}
.container{width: 1100px;height: 430px;margin: 20px auto;}
ul{list-style: none;}
.container li{width: 100px;height: 430px;float: left;}
.container .li1{background:#aaa;}//
.container .li2{background: #bbb;}
.container .li3{background: #ccc;}
.container .li4{background: #ddd;}
.container .content{height: 100%;width: 100px;
background: rgba(0,0,0,.5);cursor: pointer;}
.container .content>p{color: #fff;float: left;}
.container .content>.p1{width: 12px;margin: 25px 20px 0;}
.container .content>.p2{width: 14px;margin-top: 25px;}
.container .p2{font-size: 14px;}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
</head>
<body>
<div class="container">
<ul>
<li class="li1">
<div class="content">
<p class="p1">作者：陕西省大龙哥</p>
<p class="p2">大龙哥的传说不是你能够懂得，要慢慢去琢磨！</p>
</div>
</li>
<li class="li2">
<div class="content">
<p class="p1">作者：榆林市大龙哥</p>
<p class="p2">大龙哥的传说不是你能够懂得，要慢慢去琢磨！</p>
</div>
</li>
<li class="li3">
<div class="content">
<p class="p1">作者：子洲县大龙哥</p>
<p class="p2">大龙哥的传说不是你能够懂得，要慢慢去琢磨！</p>
</div>
</li>
<li class="li4">
<div class="content">
<p class="p1">作者：中国的大龙哥</p>
<p class="p2">大龙哥的传说不是你能够懂得，要慢慢去琢磨！</p>
</div>
</li>
</ul>
</div>
</body>
<script>
$(function(){
// 鼠标移入content中
$(".content").click(function(){
// 当前content的父级,li宽度设置为789
$(this).parent().animate({
width:789
})
// 其他li的宽度设置成为100
.siblings().animate({
width:100
})
})
})
</script>
</html>
