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

How to control animate function on button click?

本文关键字：按钮 动画 功能 单击 何控制 控制      更新时间：2023-09-26

我有两个名为"arrow"answers"inner"的div。我试图在单击div时控制animate slide函数，但很不幸。当用户停止单击"箭头"div后，快速单击该div时，问题会很明显。div仍在滑动。我在一个小延迟下设置了animate函数，但我仍然会遇到延迟。这是我的示例代码：

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

只需更改代码

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

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

演示

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

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

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

这可能会有所帮助：

        $("#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
        );
相关文章：