2012-08-08 61 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