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>

此外，还有一个现场演示here。就像我之前说的，出于某种原因，.on（）不会发生。：（

谢谢。：）

Answer 1

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

$content.stop().animate(

这将在开始新动画之前停止和之前的动画。

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

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

请参阅：

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

Answer 2

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 3

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

jQuery，在动画期间停止点击

3 个答案: