私はこれらのコードを書き、IE&chrome&firefox で動作するようにしました。chrome と firefox ではうまく動作しますが、IE ではうまくいきません。誰かが理由を教えてくれます、ありがとう!
これらのコードは、開始ボタンを押すとアニメーションを作成します。停止ボタンを押すと停止することを願っていますが、停止ボタンを押すと、アラートが何度も表示されます。
わかりました、これは私のコードです。ブラウザには注意してください。アニメーションの再生中にクラッシュする可能性があります。
私の下手な英語を許してください
<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>