Jquery-如何控制點擊按鈕上的動畫功能？

我有兩個名爲「箭頭」和「內」的div。我試圖在點擊div時控制動畫滑動功能，但一直不幸。在用戶停止點擊div仍然滑動後，點擊「arrow」div上非常快的速度時，問題很明顯。我在短暫的延遲下設置了動畫功能，但我仍然遇到延遲。這裏是我的示例代碼：Jquery-如何控制點擊按鈕上的動畫功能？

 <script language="javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script> 
    <script language="javascript"> 
    $(document).ready(function() { 
      var out = 0; 
      $("#arrow").click(function(){ 
      if(out==0) 
      { 
       $("#inner").animate({marginRight: "0px"}, 500); 
       out=1; 
      } 
     else 
      { 
      $("#inner").delay(400).animate({marginRight: "-100px"}, 500); 
      out=0; 
      } 
     }); 
    }); 
    </script> 

    <div style="background-color: rgb(204, 204, 204); height: 300px; width: 300px; overflow: hidden; position: relative;"> 
<div id="inner" style="height: 100px; width: 150px; background-color: rgb(0, 204, 102); float: right; margin-right:-150px;" >Form is here</div> 

<div id="arrow" style="height: 100px; width: 50px; background-color: rgb(255, 0, 0); float: right; cursor: pointer; position: absolute; top: 0; right: 0;" >Arrow is here</div> 


    </div>

來源

2012-03-24 CodingWonders90

1）使用1.7.1或最新 - 2）爲什麼不切換？ – mplungjan 2012-03-24 06:49:09

嘿使用此 - http://jsfiddle.net/paL6M/2/（使用手風琴），但你去的**版本是在這裏：** http://jsfiddle.net/VuzdM/1/駐留在這裏 - 讓我知道如果這有幫助，我不會看到任何滯後讓我知道我可以將它設置爲回答+ 1 for @mplungjan提及使用最新的Jquery版本，歡呼！ – 2012-03-24 06:55:05

只要改變你的代碼

$("#inner").animate({marginRight: "0px"}, 500);

到

$("#inner").stop(true, true).animate({marginRight: "0px"}, 500);

和

$("#inner").animate({marginRight: "-100px"}, 500);

到

$("#inner").stop(true, true).animate({marginRight: "-100px"}, 500);

請參閱下面的鏈接，例如：http://jsfiddle.net/UAYTw/1/

你也可以使用$（「＃內部」）停止（真，假）.animate（）而不是$（「＃內部」）停止。（true，true）.animate（）。根據您的選擇。

來源

2012-03-24 06:52:44

謝謝您，先生，這幫助了它保持控制。 – CodingWonders90 2012-03-24 07:11:25

@ user1261800-如果這個答案很有幫助，那麼接受這個答案是必要的。 http://meta.stackexchange.com/questions/91889/how-do-i-accept-an-answer-to-my-questions – 2012-03-24 07:37:39

我建議切換http://jsfiddle.net/mplungjan/eMsQr/ – mplungjan 2012-03-24 09:09:43

您可以使用.animate().stop()方法停止動畫。

演示：http://jsfiddle.net/YKn7c/

來源

2012-03-24 06:58:05 codef0rmer

這可能會幫助：

 $("#button").hover(
      function() { 
       $("#effect").stop().animate({ opacity: '1', height: '130' }, 300); 
      }, 
      function() { 
       $("#effect").stop().animate({ opacity: '0', height: '130' }, 300); 
      } 
     );

編輯：

如果你不想被關閉：

  $("#button").hover(
      function() { 
       $("#effect").stop().animate({ opacity: '1', height: '130' }, 300); 
      }, 
      null 
     );

來源

2012-03-24 09:09:37

我做沒有看到任何需要懸停在這裏。 OP想要點擊 – mplungjan 2012-03-24 09:12:05

@mplungjan你是對的，我從我的一個項目中複製並粘貼它。 – 2012-03-24 09:38:38

@VahidHassani：我想我會實施懸停。這將是非常有益的。唯一的問題是，在懸停功能被觸發後，你是如何保持滑動div打開的？這裏是我的工作副本http://jsfiddle.net/eMsQr/6/ – CodingWonders90 2012-03-24 15:07:18

使用拉維的代碼道具給他 - 切換在我看來更清潔

DEMO

$(document).ready(function() { 
    $("#arrow").toggle(
    function(){ 
     $("#inner").stop(true, true).animate({marginRight: "0px"}, 500); 
    }, 
    function(){ 
     $("#inner").stop(true, true).animate({marginRight: "-100px"}, 500); 
    } 
); 
});

來源

2012-03-24 09:11:36 mplungjan

Jquery-如何控制點擊按鈕上的動畫功能？

回答

相關問題