如何中斷jQuery的動畫？

我想通過增加該div的x位置來單擊使用jQuery的文檔來動畫div。如何中斷jQuery的動畫？

我不希望div在動畫時離開我的視線;如果div離開我的屏幕，我想把它帶回來。

<!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>

來源

2012-07-19 Evan Lévesque

今後請在您的文章中包含所有相關代碼，並且**不要**只包含jsFiddle的鏈接。您的帖子應該獨立於任何其他資源;想想如果jsFiddle將來會發生什麼事情。 – Matt 2012-07-19 10:33:18

$（「div」）。stop（0,0）; – Imdad 2012-07-19 10:33:26

我該如何檢查div是否在我的窗口邊上，而它正在動畫 – 2012-07-19 10:42:59

參考 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或任何值那適合是你。

注意：不要使用代碼的簡單div總是用id否則將作用於文檔中所有的div。

來源

2012-07-19 10:48:22 Imdad

非常感謝，我知道我不能在jQuery選擇器中使用標籤名稱，因爲我可能有很多這個標籤（很多在我的網頁div），但這只是例子 – 2012-07-19 11:05:02

如何中斷jQuery的動畫？

回答

相關問題