我用传统 js 方法编写小球动画时发现三个球球速一个比一个快，而且不能回滚，第三个球一直在原位震动，后来发现是因为我把代码里的 else { if... else...}当成了 else if.. else...，但我不知道这二者有什么区别，为什么最后动画结果不一样？

错误代码：

function animation(ball, distance, cb){
		setTimeout(function(){
			var marginLeft = parseInt(ball.style.marginLeft, 10);
	    	if (marginLeft === distance){
	    		cb && cb();
	    	    } 
	    	else if (marginLeft < distance){
	            marginLeft++;
	    	} 
	    	     else {
	    		marginLeft--;
	    	}
	             ball.style.marginLeft = marginLeft + 'px';
	             animation(ball, distance, cb);
	    	}, 13)
	}

正确代码：

function animation(ball, distance, cb){
		setTimeout(function(){
			var marginLeft = parseInt(ball.style.marginLeft, 10);
	    	if (marginLeft === distance){
	    		cb && cb();
	    	    } 
	    	else{ if (marginLeft < distance){
	            marginLeft++;
	    	} 
	    	     else {
	    		marginLeft--;
	    	}
	             ball.style.marginLeft = marginLeft + 'px';
	             animation(ball, distance, cb);
	         }
	    	}, 13)
	}

求解答