很奇怪，第一次移進去icon向上運動后不會繼續實現鏈式運動，也就是后面的fn沒運行
找不到出現這個問題的原因，求大神指教
html文件：
<!DOVTYPE html>
<html>
<head>
? ? <meta charset="utf-8">
? ? <title>test5-淘寶案例</title>
? ? <style>
? ? ? ? body {?
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? }
? ? ? ? #box{
? ? ? ? ? ? width: 306px;
? ? ? ? ? ? height: 204px;
? ? ? ? ? ? background: #ccc;
? ? ? ? ? ? margin: 30px auto;
? ? ? ? ? ? border: 1px solid #9c9c9c;
? ? ? ? }
? ? ? ? #box a{
? ? ? ? ? ? position: relative;
? ? ? ? ? ? float: left;
? ? ? ? ? ? width: 80px;
? ? ? ? ? ? height: 80px;
? ? ? ? ? ? line-height: 90px;
? ? ? ? ? ? background-color: #fff;
? ? ? ? ? ? margin: 10px;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? font-size: 12px;
? ? ? ? ? ? text-decoration: none;
? ? ? ? ? ? color: #ccc;
? ? ? ? ? ? border: 1px solid #ccc;
? ? ? ? ? ? border-radius: 3px;
? ? ? ? ? ? font-weight: 600;
? ? ? ? ? ? overflow: hidden;
? ? ? ? }
? ? ? ? #box a i{
? ? ? ? ? ? display: block;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 20px;
? ? ? ? ? ? left: 30px;
? ? ? ? ? ? filter: alpha(opcity:100);
? ? ? ? ? ? opacity: 1;
? ? ? ? }
? ? ? ? #box a:hover{
? ? ? ? ? ? color: #f00;
? ? ? ? }
? ? </style>
? ? <script src="move.js"></script>
? ? <script>
? ? window.onload = function(){
? ? ? ? var box = document.getElementById('box'),
? ? ? ? ? ? alist = box.getElementsByTagName('a');
? ? ? ? for(var i=0;i<alist.length;i++){
? ? ? ? ? ? alist[i].onmouseover = function(){
? ? ? ? ? ? ? ? var _this = this.getElementsByTagName('i')[0];
? ? ? ? ? ? ? ? startMove(_this,{top:-25,opacity:0},function(){
? ? ? ? ? ? ? ? ? ? _this.style.top = '30px';
? ? ? ? ? ? ? ? ? ? startMove(_this,{top:20,opacity:100});
? ? ? ? ? ? ? ? });
? ? ? ? ? ? }
? ? ? ? }
? ? }
? ? </script>
</head>
<body>
? ? <div id="box">
? ? ? ? <a href="#"><i><img src="images/food.png"></i><p>美食</p></a>
? ? ? ? <a href="#"><i><img src="images/game.png"></i><p>游戲</p></a>
? ? ? ? <a href="#"><i><img src="images/insurance.png"></i><p>保險</p></a>
? ? ? ? <a href="#"><i><img src="images/lottery.png"></i><p>彩票</p></a>
? ? ? ? <a href="#"><i><img src="images/movie.png"></i><p>電影</p></a>
? ? ? ? <a href="#"><i><img src="images/travel.png"></i><p>旅游</p></a>
? ? </div>
</body>
</html>
script文件，move.js
//獲取樣式
function getStyle(obj,attr){
? ? if(obj.currentStyle){
? ? ? ? return obj.currentStyle[attr];
? ? }else{
? ? ? ? return getComputedStyle(obj,false)[attr];
? ? }
}
//隨意屬性值
//startMove(obj,{attr1:iTarget1,attr2:iTarget2},fn)
function startMove(obj,json,fn){
? ? var flat = true; ?//true：都到達了
? ? clearInterval(obj.timer); ? ? ? ? ?
? ? obj.timer = setInterval(function(){
? ? ? ? for(var attr in json){
? ? ? ? ? ? var icur = 0;
? ? ? ? ? ? //檢測屬性
? ? ? ? ? ? if(attr == 'opacity'){
? ? ? ? ? ? ? ? icur = Math.round(parseFloat(getStyle(obj,attr))*100);
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? icur = parseInt(getStyle(obj,attr));
? ? ? ? ? ? }
? ? ? ? ? ? //算速度
? ? ? ? ? ? var speed = (json[attr]-icur)/8;
? ? ? ? ? ? speed = speed>0?Math.ceil(speed):Math.floor(speed);
? ? ? ? ? ? //判斷運行狀態
? ? ? ? ? ? if(icur != json[attr]){ //所有的運動還沒完成
? ? ? ? ? ? ? ? flat = false;
? ? ? ? ? ? }
? ? ? ? ? ? if(attr == 'opacity'){
? ? ? ? ? ? ? ? obj.style.filter = 'alpha(opacity:'+(icur + speed)+')';
? ? ? ? ? ? ? ? obj.style.opacity = (icur + speed)/100;
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? obj.style[attr] = icur + speed +'px'; ?
? ? ? ? ? ? }
? ? ? ? ? ? if(flat == true){
? ? ? ? ? ? ? ? clearInterval(obj.timer);
? ? ? ? ? ? ? ? if(fn){
? ? ? ? ? ? ? ? ? ? fn();
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? },30);
}
2017-01-06
function?startMove(obj,json,fn){ //????var?flat?=?true;??//原來 ????clearInterval(obj.timer);?????????? ????obj.timer?=?setInterval(function(){ ????????var?flat?=?true;??//現在 ????????for(var?attr?in?json){ ????????…… ????????}把 var flat = true，放到定時器里面就可以了