2012-08-08 36 views
0

我編寫這些代碼並使其在IE中工作& chrome & firefox,它在Chrome和Firefox中運行良好,但在IE中出錯。有人告訴我爲什麼,謝謝!IE上的jquery動畫製作錯誤

這些代碼會在按下開始按鈕時產生動畫,我希望按下停止按鈕時它會停止,但是當我按下停止按鈕時,警報會顯示很多次。

好的,這是我的代碼。關於你的瀏覽器,可能會在動畫播放時崩潰。

原諒我,我的英語不好

<html style = "overflow:hidden"> 
<script src="jquery-1.7.2.js"></script> 
<script> 
var DIV ; 
var CONTENT ; 
var move = false; 
$(function(){ 
    DIV = $('<img src="7.png"></img>'); 
    CONTENT = $('#content'); 
}); 
function startAnimation(){ 
    $('#content').empty(); 
    var div = $('<img src="7.png"></img>'); 
    div.appendTo('#content'); 

    var w_w=$(document).width(); 
    var d_w=div.width(); 
    var l=w_w/2 - d_w/2; 

    div.css("position","absolute"); 
    div.css("top",$(document).height()+div.height()); 
    div.css("left",l); 

    if(!move){ 
     div.animate({top:-div.height(),left:l},1000,function(){ 
      alert('ok'); 
      return; 
     }); 
    }else{ 
     div.animate({top:-div.height(),left:l},1000,function(){ 
     //setTimeout(function(){ 
      startAnimation.call(window); 
      return; 
     }); 
    } 
} 
function start(){ 
    if(!move){ 
     move = true; 
     startAnimation(); 
    } 
} 
function stop(){ 
    move = false; 
} 
</script> 
<body style = "overflow:hidden"> 
<button onclick="start();">start</button> 
<button onclick="stop();">stop</button> 
<div id='content' sytle="width:1000px;height:700px;overflow:hidden"> 

</div> 
</body> 
</html> 

回答

0

一些Internet Explorer的版本不忽視的CSS值;沒有px在它的末尾。

top:200返回錯誤,但top:200px正常工作即ie。

試試這個:

if(!move){ 
    div.animate({'top':-div.height()+'px','left':l + 'px'},1000,function(){//here 
     alert('ok'); 
     return; 
    }); 
}else{ 
    div.animate({'top':-div.height()+'px','left':l + 'px'},1000,function(){//+'px' 
     startAnimation.call(window); 
     return; 
    }); 
} 
+0

我試圖加入「像素」,但它不工作。該警報不僅顯示一次,我不明白 – 2012-08-08 08:52:36

+0

你可以顯示你的例子嗎?或者你也可以在jsFiddle上給我們看,所以我們可以很快解決這個問題。 http://jsfiddle.net/ – 2012-08-08 08:57:36

+0

我希望http://jsbin.com/ivemug/2工程 – 2012-08-08 09:12:45