jQuery, прекращение нажатия во время анимации

Question

: D

В настоящее время у меня много проблем с анимацией jQuery. По сути, нажатие кнопки быстро запускает короткую анимацию и сворачивает боковую панель, расширяя окно основного содержимого до полной ширины (и обратно, если необходимо). Проблема в том, что при быстрых последовательных щелчках раскладка сводится с ума. Я пробовал это условие:

if (!$(this).is(":animated"))
{
// Code
}

Но это не работает. Итак, я попытался .off (), и он отключается, но я не могу найти, как включить .on (). Может кто-то помочь мне, пожалуйста? Вот что у меня есть:

    <script type="text/javascript">
$(document).ready(function(){

var $button     =   $("a#toggle");
var $content    =   $("div#index_main-content");
var $sidebar    =   $("div#sidebar");

    // Disable quicky clicky
    $button.click(function() {

        $button.off().delay(1000).on();

    });

    // Hide sidebar
    $button.toggle(function sidebarToggle() {
        $sidebar.fadeOut(500, function() {

            $content.animate({width: '100%'}, 500, function() {

                $button.attr("title", "Click to show the sidebar!").addClass("hiding").removeClass("showing");

            });

        });

    },

    // Show sidebar
    function sidebarToggle() {
        $content.animate({width: '69.5%'}, 500, function() {

            $sidebar.fadeIn(500, function() {

                $button.attr("title", "Click to hide the sidebar!").addClass("showing").removeClass("hiding");

            });

        });

    });

});
</script>

<div id="index_content">

    <a title="Click to hide the sidebar" class="showing" id="toggle"></a>

    <div id="sidebar">
        <!-- Sidebar: float-right/width-28.5% -->
    </div>

    <div id="index_main-content">
        <!-- Content: float-left/width-69.5% -->
    </div>
</div>

Также здесь есть живое демо здесь . Как я уже говорил ранее, по какой-то причине .on () не происходит. (

Спасибо. :)

Answer 1

stop () , чтобы остановить текущую анимацию, очистить очередь анимации и перейти к концу анимации .stop (true, true)

или

• поверните кнопку в положение OFF перед началом анимации

• поверните кнопку в положение ON в функции обратного вызова анимации, чтобы она снова включалась после завершения анимации

ИЛИ более просто

<div id="index_content">

    <a title="Click to hide the sidebar" class="showing" id="toggle">Click me</a>

    <div id="sidebar">sidebar
        <!-- Sidebar: float-right/width-28.5% -->
    </div>

    <div id="index_main-content">content
        <!-- Content: float-left/width-69.5% -->
    </div>
</div>

$(document).ready(function(){
  $('#toggle').click(function(){
    $('#sidebar:visible').fadeOut('slow')
    $('#sidebar:hidden').fadeIn('slow')
  })
})

взгляните @ http://jsfiddle.net/jdFrR/

Answer 2

$content.stop(true,true).animate({ //code });

Answer 3

Попробуйте использовать stop перед повторным запуском анимации, например:

$content.stop().animate(

Это остановит и предыдущие анимации перед запуском новой.

Также используйте true в остановкеоператор для отмены другой анимации и завершения анимации.

$content.stop(true,true).animate(

См .:

http://api.jquery.com/stop/