当使用 jQuery 单击文档时，我试图通过增加该 div 的 x 位置来为该 div 制作动画。
我不希望 div 在动画时离开我的视线；如果 div 离开了我的屏幕，我想把它带回来。
这是my code :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
overflow: hidden;
}
div {
position: absolute;
left:10px;
top:10px;
width:20px;
height:20px;
background-color:green;
}
</style>
<script type="text/javascript">
$(function(){
$(document).click(function(){
if($("div").offset().left > (parseInt($(window).width()))){
$("div").animate({"top":'+=20'},1000);
$("div").animate({"left": '8' },1000);
}else{
$("div").animate({"left":'+=400'},1000);
}
});
});
</script>
</head>
<body>
<div></div>
</body>
</html>
最佳答案
引用 http://jsfiddle.net/YV747/3/
$(function(){
$(document).click(function(){
$("#pointer").stop(0,0);
if(($("#pointer").offset().left+100) > $(window).width()){
$("#pointer").animate({"top":'+=20',"left":8},1000);
//$("#pointer").animate({"left": '8' },1000);
}else{
$("#pointer").animate({"left":'+=400'},1000);
}
});
});
查看行 if(($("#pointer").offset().left+100) > $(window).width()){
我给了 100，你可以给 400 或任何适合你的值。
Note: Do not use code on simply
divalways useidotherwise it will act on all the divs in the document.
关于jquery - 如何中断 jQuery 动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11558930/