.animate({属性:目标},function(){目标完成后执行})
清除定时器:.stop()【每个动画后都需要清除一次定时器】
stop有两个参数,默认情况下为false1.动画列队(第一个参数):
false:不操作
true:清空
2.当前动画(第二个参数):
false:立即停止
true:立即到终点
样式图:
全部代码: (图片自己加)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="./jquery.js"></script>
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#box {
border: 1px solid red;
width: 602px;
height: 202px;
overflow: hidden;
}
.sbox {
height: 200px;
width: 150px;
float: left;
}
</style>
</head>
<body>
<div id="box">
<div class="sbox"><img src="1.jpg" /></div>
<div class="sbox"><img src="2.jpg" /></div>
<div class="sbox"><img src="3.jpg" /></div>
<div class="sbox"><img src="4.jpg" /></div>
</div>
</body>
<script>
$(".sbox").hover(function() {
$(this).stop().animate({
width: 300
}).siblings().stop().animate({
width: 100
});
},function(){
$(".sbox").stop().animate({width:150})
})
</script>
</html>