jQuery做出手风琴效果
今天学到JQuery中的遍历-siblings，便手痒做了个手风琴的动态效果，有一点收获，分享给大家。mouseout的时候一定要记得opacity必须设置，不然li的opacity会保持mousemove时的状态。代码有不足的地方欢迎大家踊跃的提意见。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>siblings遍历</title>
<style type="text/css">
ul{
overflow: hidden;
}
ul li{
text-align: center;
list-style: none;
float: left;
width: 50px;
height: 100px;
margin: 10px auto;
background: #444444;
border: 0.5px solid #ffffff;
}
</style>
<script type="text/javascript" src="../vendor/jquery-1.11.3.min.js"></script>//引入jQuery
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<script type="text/javascript">
$("ul li").mouseover(function(){
$(this).animate({
opacity:"0.8",
width:"55px",
height:"110px"})
.siblings().css({
opacity:"0.4",
width:"45px",
height:"90px"});
});
$("ul").mouseout(function(){
$("ul li").css({
background:"#444444",
width: "50px",
height: "100px",
opacity:"1",//一定要记得透明度也得设置，如若不设置，透明度会保持你在mousemove的时候的状态
})
});
</script>
</body>
</html>
