如何綁定/解除綁定點擊以防止動畫的隊列混亂？

這一個不會工作。動畫隊列最終陷入混亂。我錯了什麼？請幫助。如何綁定/解除綁定點擊以防止動畫的隊列混亂？

$button.bind('click',showHideFavourites); 

function showHideFavourites() { 
    if ($favContent.css('opacity') == 1) { 
     hideFavourites(); 
    } else { 
     showFavourites(); 
    } 
} 

function hideFavourites() { 
    $button.unbind('click'); 

    $favContent.animate({'opacity':'0'},250,function() { 
     $favourites.animate({'height':0},{queue:false,duration:250,easing:'easeInOutQuad',complete:function() { 
      $button.text(showFav); 

      $button.bind('click',showFavourites); 
     }}); 
    }); 
} 

function showFavourites() { 
    $button.unbind('click'); 

    $favourites.animate({'height':fl_openHeight},{queue:false,duration:250,easing:'easeInOutQuad',complete:function() { 
     $favContent.animate({'opacity':'1'},250); 
     $button.text(hideFav); 

     $button.bind('click',hideFavourites); 
     }); 
    }}); 
}

來源

2011-12-01 Thomas

$button.on('click', function() { 
    $favContent.css('opacity') == 1) ? hideFavourites() : showFavourites(); 
}); 

function hideFavourites() { 
    $favContent.stop(true, true).animate({'opacity':'0'},250,function() { 
     $favourites.stop(true, true).animate({'height':0}, 250, 'easeInOutQuad', function() { 
      $button.text(showFav); 
     }); 
    }); 
} 

function showFavourites() { 
    $favourites.stop(true, true).animate({'height':fl_openHeight}, 250 'easeInOutQuad' function() { 
     $button.text(hideFav); 
     $favContent.stop(true, true).animate({'opacity':'1'},250); 
    }); 
}

如果你試圖在同一時間，你應該放棄的鏈接功能以及，我did'nt我was'nt知道什麼noqeue是爲動畫高度和透明度？

來源

2011-12-01 15:17:41 adeneo

謝謝。關於'.on'，我從來沒有聽說過。首先，我認爲這應該是'.one'，但在這種情況下這沒有意義。所以我用'.on'對其進行了測試，並且事實上它做了這件事，但當我快速點擊按鈕兩三次時，隊列問題仍然存在。 – Thomas

.on（）是新的，你仍然可以使用.click（），但是我用它來替代綁定，生活，點擊等等，使得它不必選擇一個。動畫qeue的問題可能可以通過.stop（）解決。有關更多信息，請參閱jQuery站點，但stop（）會停止動畫，並停止（true）清除qeue，而stop（true，true）將清除qeue並直接將動畫結束。我在示例中添加了一些停止來顯示它是如何完成的，但是您通常必須稍微嘗試一下，才能使其適合您的特定用途。 – adeneo

如何綁定/解除綁定點擊以防止動畫的隊列混亂？

回答

相關問題