level 1
langren1130
楼主
设想的效果是鼠标移入黄色圆形图标，每秒钟一次想右侧弹出3个图标，可是为什么最后一个要等好久才弹出来？
<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jquery</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#btn{width:100px;height:100px;position:relative;margin:100px;}
#btn div{position:absolute;top:0;left:0;width:100px;height:100px;border-radius:50%;}
#btn div:nth-child(1){background:red;}
#btn div:nth-child(2){background:blue;}
#btn div:nth-child(3){background:green;}
#btn div:nth-child(4){background:yellow;}
</style>
</head>
<body>
<div id="btn">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
$('#btn div:last-child').mouseover(function(){
$('#btn div').slice(0,3).animate({left:'120px'},1000,function(){
$('#btn div').slice(0,2).animate({left:'240px'},1000,function(){
$('#btn div').slice(0,1).animate({left:'360px'},1000)
})
})
})
</script>
</html>
2018年06月26日 06点06分
1
<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jquery</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#btn{width:100px;height:100px;position:relative;margin:100px;}
#btn div{position:absolute;top:0;left:0;width:100px;height:100px;border-radius:50%;}
#btn div:nth-child(1){background:red;}
#btn div:nth-child(2){background:blue;}
#btn div:nth-child(3){background:green;}
#btn div:nth-child(4){background:yellow;}
</style>
</head>
<body>
<div id="btn">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
$('#btn div:last-child').mouseover(function(){
$('#btn div').slice(0,3).animate({left:'120px'},1000,function(){
$('#btn div').slice(0,2).animate({left:'240px'},1000,function(){
$('#btn div').slice(0,1).animate({left:'360px'},1000)
})
})
})
</script>
</html>
