Javascript Jquery-如何控制按钮单击时的动画功能？

我有两个div，分别是“arrow”和“inner”。我试图控制动画幻灯片功能时，div被点击，但不幸的是。当用户停止单击“箭头”div后，快速单击“箭头”div时，问题很明显，该div仍在滑动。我在一个小延迟下设置了动画功能，但是我仍然会遇到延迟。下面是我的示例代码：

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

$（文档）.ready（函数（）{
var out=0；
$（“#箭头”）。单击（函数（）{
如果（out==0）
{
$（“#内部”）.animate（{marginRight:“0px”}，500）；
out=1；
}
其他的
{
$（“#内部”）.delay（400）。动画（{marginRight:-100px}，500）；
out=0；
}
});
});
表格在这里
阿罗在这里

只需更改代码即可

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

到

及

到

例如，请参见以下链接：

您还可以使用$（“#inner”）.stop（true，false）.animate（）代替$（“#inner”）.stop（true，true）.animate（）。根据您的选择。

只需更改代码即可

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

到

及

到

例如，请参见以下链接：

您还可以使用$（“#inner”）.stop（true，false）.animate（）代替$（“#inner”）.stop（true，true）.animate（）。根据您的选择。

您可以使用

.animate（）.stop（）

方法停止动画

演示：

您可以使用

.animate（）.stop（）

方法停止动画

演示：

这可能有助于：

        $("#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
        );

这可能有助于：

        $("#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
        );

---

在我看来，使用拉维的代码道具来切换他是更干净的

---

在我看来，使用拉维的代码道具来切换他是更干净的

---

1） 使用1.7.1或最新版本-2）为什么不切换？嘿，使用这个-（使用手风琴）但是你要使用的版本在这里：驻留在这里-让我知道如果这有帮助，我看不到任何延迟，让我知道我可以将其设置为答案，@mplungjan+1表示使用最新Jquery版本，干杯！1） 使用1.7.1或最新版本-2）为什么不切换？嘿，使用这个-（使用手风琴）但是你要使用的版本在这里：驻留在这里-让我知道如果这有帮助，我看不到任何延迟，让我知道我可以将其设置为答案，@mplungjan+1表示使用最新Jquery版本，干杯！谢谢你，先生，这对控制局面有很大帮助。@user1261800-如果这个答案有很大帮助，那么接受这个答案是必要的。谢谢你，先生，这对控制局面有很大帮助。@user1261800-如果这个答案有很大帮助，那么接受这个答案是必要的。我看不需要在这里停留。OP想要click@mplungjan你说得对，我从我的一个项目中复制并粘贴了它。@VahidHassani:我想我会实现悬停。这将非常有帮助。唯一的问题是，在触发悬停功能后，您是如何保持滑动div打开的？这里是我的工作副本，你应该把空的鼠标出的部分，如上面我会编辑后。我不认为有任何需要在这里悬停。OP想要click@mplungjan你说得对，我从我的一个项目中复制并粘贴了它。@VahidHassani:我想我会实现悬停。这将非常有帮助。唯一的问题是，在触发悬停功能后，您是如何保持滑动div打开的？这是一份我的工作，你应该把空的鼠标出来的部分，如上面我会编辑后。

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