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-如何控制点击按钮上的动画功能？

回答

相关问题