Animation jQuery，在动画期间停止单击

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

$（文档）.ready（函数（）{
var$按钮=$（“a开关”）；
var$content=$（“div#index#u main-content”）；
变量$sidebar=$（“div#sidebar”）；
//快速单击禁用
$按钮。单击（函数（）{
$button.off（）.delay（1000.on（）；
});
//隐藏侧边栏
$button.toggle（函数sidebarToggle（）{
$sidebar.fadeOut（500，函数（）{
$content.animate（{width:'100%}，500，function（）{
$button.attr（“标题”，“单击以显示侧栏！”）.addClass（“隐藏”）.removeClass（“显示”）；
});
});
},
//显示边栏
函数sidebarToggle（）{
$content.animate（{width:'69.5%}，500，function（）{
$sidebar.fadeIn（500，函数（）{
$button.attr（“标题”，“单击以隐藏侧栏！”）.addClass（“显示”）.removeClass（“隐藏”）；
});
});
});
});
. 正如我之前所说，出于某种原因，.on（）没有发生(

谢谢。：）
在第二次发布动画之前尝试使用“停止”，例如：

$content.stop().animate(

这将在开始新动画之前停止和上一个动画

在stop语句中也使用true取消其他动画并完成动画

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

见：

在第二次发布动画之前尝试使用“停止”，例如：

$content.stop().animate(

这将在开始新动画之前停止和上一个动画

在stop语句中也使用true取消其他动画并完成动画

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

见：

要停止当前动画，
清除动画队列并转到动画的结尾。停止（true，true）

或


在开始动画之前，将该按钮禁用

在动画回调函数中将该按钮打开，以便
在动画完成后再次启用


还是更容易

<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')
  })
})


要停止当前动画，
清除动画队列并转到动画的结尾。停止（true，true）

或


在开始动画之前，将该按钮禁用

在动画回调函数中将该按钮打开，以便
在动画完成后再次启用


还是更容易

<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')
  })
})


$content.stop（true，true）。动画（{//code}）
$content.stop（true，true）。动画（{//code}）
你把
放在哪里。（':animated'）
？你为什么要重新定义sidebarToggle？我只是想要一个名字：P和我没有用。是。。因为这是以前的测试，没有任何作用如果你能解决问题，选择解决问题的答案，那就太好了。你把
放在哪里了。是（':animated'）
？你为什么要重新定义sidebarToggle？我只想要一个名字P和我没有用。是。。因为那是之前的一次测试，没有任何效果。如果你能解决问题，选择解决问题的答案，那就太好了。非常感谢！回调.on（）不起作用，但隐藏和显示效果很好！：谢谢你！回调.on（）不起作用，但隐藏和显示效果很好！：D