《2018年12月31日》【连续453天】
标题:JQ手风琴案例,动画队列;
内容:
<body>
<div id="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
var $li = $("#box li");
for (var i = 0; i < $li.length; i++) {
$li.eq(i).css("backgroundImage", "url(images/" + (i + 1) + ".jpg)");
}
//给所有的li注册鼠标经过事件
$li.mouseenter(function () {
$(this).stop().animate({width:800}).siblings().stop().animate({width:100});
}).mouseleave(function () {
$li.stop().animate({width:240});
});
//stop()停止当前正在执行的动画,来防止动画队列带来的bug;
});
</script>
</body>