Jquery - Как управлять функцией анимации по нажатию кнопки?

Question

У меня есть два 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

Использование кода Рави подпирает его - на мой взгляд, переключение чище

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

это может помочь:

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

Answer 4

Вы можете использовать метод .animate().stop(), чтобы остановить анимацию.

Демо: http://jsfiddle.net/YKn7c/