jQuery，在動畫過程中停止點擊

我目前在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（）不會發生。 :(

謝謝:)

來源

2012-02-03 sackbot14

你把'.is（'：animated'）'放在哪裏？ – Blender 2012-02-03 05:07:26

爲什麼你重新定義sidebarToggle？ – 2012-02-03 05:11:21

我只想要一個名字。：P和我沒有使用.is ..因爲那是以前的測試，並且它什麼也沒做 – sackbot14 2012-02-05 06:49:31

嘗試使用停止發放動畫的第二次之前，比如：

$content.stop().animate(

這將停止和啓動新的人之前先前的喧鬧。

也可以在停止語句中使用true取消其他動畫並完成動畫。

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

參見：

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

來源

2012-02-03 05:07:17

stop()停止當前的動畫，清晰動畫隊列，然後轉到動畫.stop結束（真，真）

或

turn th e鈕爲關閉時，啓動動畫前
打開按鈕上的動畫回調函數中，使開啓後再次動畫完成

以上容易

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

來源

2012-02-03 05:11:12 s3mre8

非常感謝！回調.on（）不起作用，但隱藏和顯示效果很好！：d – sackbot14 2012-02-05 06:50:43

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

來源

2012-02-03 05:11:42 elclanrs

jQuery，在動畫過程中停止點擊

回答

相關問題