亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定

動畫實現不了

按照你的代碼寫的，marginLeft 的值一直為0 ?怎么回事？

正在回答

7 回答

<!doctype>
<html>
<head>
	<title>Promise?animation</title>
	<style>
	.ball{
		width:40px;
		height:40px;
		border-radius:20px;
	}
	.ball1{
		background:red;
	}
	.ball2{
		background:yellow;
	}
	.ball3{
		background:green;
	}
	</style>
</head>
<body>
	<div?class="ball?ball1"?style="margin-left:0;"></div>
	<div?class="ball?ball2"?style="margin-left:0;"></div>
	<div?class="ball?ball3"?style="margin-left:0;"></div>
	
	<script>
	var?ball1?=?document.querySelector('.ball1')
	var?ball2?=?document.querySelector('.ball2')
	var?ball3?=?document.querySelector('.ball3')
	
	function?animate?(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
				animate?(ball,distance,cb)
				//不斷重復動作
			}
		},13)
	}
	
	animate(ball1,100,function(){
		animate(ball2,200,function(){
			animate(ball3,300,function(){
				animate(ball3,150,function(){
					animate(ball2,150,function(){
						animate(ball1,100,function(){
						//
						})
					})
				})
			})
		})
	})
	</script>
	
</body>
</html>

這個親測無壓力

0 回復 有任何疑惑可以回復我~

貌似要設置初始值

0 回復 有任何疑惑可以回復我~ 
<!DOCTYPE?html>
<html>
<head>
??<meta?charset="UTF-8">
??<title>Promise?animate</title>
??<style>
????.ball{
??????width:?40px;
??????height:?40px;
??????border-radius:?20px;
????}
????.ball1{
??????background:?red;
????}
????.ball2{
??????background:?yellow;
????}
????.ball3{
??????background:?green;
????}
??</style>
</head>
<body>
??<div?class="ball?ball1"?style="margin-left:0;"></div>
??<div?class="ball?ball2"?style="margin-left:0;"></div>
??<div?class="ball?ball3"?style="margin-left:0;"></div>

<script>
??var?ball1?=?document.querySelector('.ball1');
??var?ball2?=?document.querySelector('.ball2');
??var?ball3?=?document.querySelector('.ball3');

??function?animate(ball,?distance,?callback){
????setTimeout(function()?{
??????var?marginLeft?=?parseInt(ball.style.marginLeft,?10);
??????console.log(marginLeft);
??????console.info(distance);
??????if(marginLeft?===?distance){
????????callback?&&?callback();
??????}else{
????????if(marginLeft?<?distance){
??????????marginLeft++;
????????}else{
??????????marginLeft--;
????????}

????????ball.style.marginLeft?=?marginLeft?+?'px';
????????animate(ball,?distance,?callback);
??????}
????},?13);
??}

??animate(ball1,?100,?function(){
????animate(ball2,?200,?function()?{
??????animate(ball3,?300,?function()?{
????????animate(ball3,?150,?function()?{
??????????animate(ball2,?150,?function()?{
????????????animate(ball1,?150,?function()?{
??????????
????????????})
??????????})
????????})
??????})
????})
??});
</script>
</body>
</html>

代碼可用，在chrome上跑看看。

2 回復 有任何疑惑可以回復我~

一試就靈

0 回復 有任何疑惑可以回復我~

試了還是不行

0 回復 有任何疑惑可以回復我~

ball.style.marginLeft = marginLeft + 'px';試一下

3 回復 有任何疑惑可以回復我~
#1

崖址山

WHY？
2016-03-24 回復 有任何疑惑可以回復我~
#2

止水_Lily

老師寫的就沒有+'px'，代碼仍然運行了呀
2016-05-24 回復 有任何疑惑可以回復我~

tong wen?

0 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消
進擊Node.js基礎（二）
  • 參與學習       76735    人
  • 解答問題       242    個

本教程帶你攻破 Nodejs，讓 JavaScript流暢運行在服務器端

進入課程

動畫實現不了

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號