Question

我有两个名为“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>

Answer 1

只需更改您的代码

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

你也可以使用$（“＃inner”）。stop（true，false）.animate（）而不是$（“＃inner”）。stop（true，true）.animate（）。根据你的选择。

Answer 2

使用Ravi的代码道具 - 我认为切换更清晰

DEMO

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

Answer 3

您可以使用.animate().stop()方法停止动画。

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

Answer 4

这可能有所帮助：

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

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

4 个答案: