<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>利用數組切換圖片</title>
<style>
*{
padding:?0;
margin:?0;
}
#container{
width:?600px;
height:?300px;
border:?3px?solid?#666;
margin:?20px?auto;
position:?relative;
}
img{
border:?3px?solid?#000;
border-radius:?50%;
position:?absolute;
animation-fill-mode:?forwards;
transition:?all?1s;
}
img:nth-child(1){
top:?70px;
left:?118px;
/*?transform:?scale(0.8,?0.8);?*/
z-index:?1;
opacity:?0.3;
}
img:nth-child(2){
top:?75px;
left:?225px;
/*?transform:?scale(1,?1);?*/
z-index:?3;
opacity:?1;
}
img:nth-child(3){
top:?70px;
left:?331px;
/*?transform:?scale(0.8,?0.8);?*/
z-index:?1;
opacity:?0.3;
}
a{
display:?inline-block;
background-color:?#000;
opacity:?0.5;
text-decoration:?none;
color:?#fff;
font-size:?36px;
font-weight:?bold;
position:?absolute;
top:?50%;
}
a:nth-of-type(1){
right:?0;
}
/*?img.active0{
animation:?active0??0.8s;
animation-fill-mode:?forwards;
}
@keyframes?active0{
100%?{top:?75px;left:?225px;transform:?scale(1,?1);opacity:?1;z-index:?3;}
}?
img.active1{
animation:?active1?0.8s;
animation-fill-mode:?forwards;
}
@keyframes?active1{
100%?{top:?70px;left:?331px;transform:?scale(0.8,?0.8);opacity:?0.3;z-index:?1;}
}?
img.active2{
animation:?active2?0.8s;
animation-fill-mode:?forwards;
}
@keyframes?active2{
100%?{top:?70px;left:?118px;transform:?scale(0.8,?0.8);opacity:?0.3;z-index:?1;}
}?*/?
.scale{
transform:?scale(0.8,?0.8);
}
</style>
<script?src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script>
$(function?()?{
var?imgs?=?$("#container>img");
var?next?=?$("#container>a:first");
var?perv?=?$("#container>a:last");
var?arr?=?[?
{"top":"75px","left":"225px","opacity":"1","z-index":"3"},?
{"top":"70px","left":"331px","opacity":"0.3","z-index":"1"},?
{"top":"70px","left":"118px","opacity":"0.3","z-index":"1"}?
];
var?arrClass?=?[?"addClass",?"removeClass",?"addClass"?];?
next.click(function?()?{
if?(imgs.is(":animated"))?{
alert(1);//無效
}
imgs.eq(0).animate(arr[0],?100,?function?()?{
$(this)[arrClass[0]]('scale');
})
imgs.eq(1).animate(arr[1],?100,?function?()?{
$(this)[arrClass[1]]('scale');
})
imgs.eq(2).animate(arr[2],?100,?function?()?{
$(this)[arrClass[2]]('scale');
})
arr.push(arr.shift());
arrClass.push(arrClass.shift());
return?false;
})
perv.click(function?()?{
imgs.eq(0).animate(arr[1],?100,?function?()?{
$(this)[arrClass[0]]('scale');
})
imgs.eq(1).animate(arr[2],?100,?function?()?{
$(this)[arrClass[1]]('scale');
})
imgs.eq(2).animate(arr[0],?100,?function?()?{
$(this)[arrClass[2]]('scale');
})
arr.unshift(arr.pop());
arrClass.unshift(arrClass.pop());
return?false;
})
})
</script>
</head>
<body>
<div?id="container">
<img?src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1491019968231&di=f6fc50430c35749c219f0217d1fb5a51&imgtype=0&src=http%3A%2F%2F2t.5068.com%2Fuploads%2Fallimg%2F151210%2F1-151210164510.jpg"?alt=""?width="150"?height="150"?class="scale">
<img?src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1491019968231&di=f44b3a4766227087eed330d97c969a74&imgtype=0&src=http%3A%2F%2Fpic2.52pk.com%2Ffiles%2F131220%2F1283568_103405_8845.jpg"?alt=""?width="150"?height="150">
<img?src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1491019968231&di=37beec62f989bbd8e6e3c1d6c149af06&imgtype=0&src=http%3A%2F%2Fpic2.52pk.com%2Ffiles%2F131220%2F1283568_103407_3114.jpg"?alt=""?width="150"?height="150"?class="scale">
<a?href="">></a>
<a?href=""><</a>
</div>
</body>
</html>不停點擊的時候就出現bug，想讓里面的img動畫執行完了再點擊再繼續執行，怎么寫？
.is(":animated")無效 錯在哪里
啊啊啊啊123
2017-04-01 09:37:35