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

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()。根据您的选择。