abstrak：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>hover動(dòng)畫(huà)</title> <link rel="stylesheet" href="static/css/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hover動(dòng)畫(huà)</title>
<link rel="stylesheet" href="static/css/style2.css">
<link rel="stylesheet" href="static/font-awesome/css/font-awesome.css">
<link rel="shortcut icon" href="static/images/logo1.png" type="image/x-icon">
<script type="text/javascript" src="static/js/jquery.js"></script>
</head>
<body>
<ul id="nav">
<li class="li1"><span class="fa fa-tags"></span></li>
<li class="li2"><span class="fa fa-address-card"></span></li>
<li class="li3"><span class="fa fa-grav"></span></li>
<li class="li4"><span class="fa fa-user-o"></span></li>
<li class="li5"><span class="fa fa-handshake-o"></span></li>
</ul>
<script type="text/javascript">
$(function(){
// $("#nav li").css('marginLeft','-90px');
$("#nav li").stop().animate({'marginLeft':'-90px'},1000);
$("li").hover(function(){
$(this).stop().animate({'marginLeft':'-10px'},500)
},
function(){
$(this).stop().animate({'marginLeft':'-90px'},500)
});
var length = $("#nav li").length;
// alert(length);
var func = function(){
setTimeout(function(){
$("#nav li").eq(0).stop().animate({'marginLeft':'-10px'},500)
},2000)
setTimeout(function(){
$("#nav li").eq(0).stop().animate({'marginLeft':'-90px'},500)
$("#nav li").eq(1).stop().animate({'marginLeft':'-10px'},500)
},4000)
setTimeout(function(){
$("#nav li").eq(1).stop().animate({'marginLeft':'-90px'},500)
$("#nav li").eq(2).stop().animate({'marginLeft':'-10px'},500)
},6000)
setTimeout(function(){
$("#nav li").eq(2).stop().animate({'marginLeft':'-90px'},500)
$("#nav li").eq(3).stop().animate({'marginLeft':'-10px'},500)
},8000)
setTimeout(function(){
$("#nav li").eq(3).stop().animate({'marginLeft':'-90px'},500)
$("#nav li").eq(4).stop().animate({'marginLeft':'-10px'},500)
},10000)
setTimeout(function(){
$("#nav li").eq(4).stop().animate({'marginLeft':'-90px'},500)
},12000)
}
func();
setInterval(func,13000);
})
老師代碼沒(méi)有測(cè)試，你自己實(shí)踐一下，邏輯是這么個(gè)邏輯，雷同效果可以循環(huán)呀兄弟
setInterval ( function(){
for ( i=0;i < 5 ;i++){
let that=i;
setTimeout(function(){if(that>0){
$("#nav li").eq(that-1).stop.animate({marginLeft: -90px},500);}
$("#nav li").eq(that).stop().animate({marginLeft:-10px},500);}, 2000*that)}
},14000);
</script>
</body>
</html>請(qǐng)問(wèn)一下 定時(shí)器這塊能否優(yōu)化一下么?
Guru membetulkan：滅絕師太Masa pembetulan：2018-11-15 17:34:09
Rumusan guru：字?jǐn)?shù)限制，你看你的源碼里面啊，批注在源碼里面