Анимация для складного блока с печеньем

Question

Я почти не знаю javascript. Может кто-нибудь помочь мне сделать анимацию для сборного блока?

---

$(document).ready(function() { 
    var button = $('#hideButton'); 
    //check the cookie when the page loads 
    if ($.cookie('currentToggle') === 'hidden') { 
     togglePanel(button, false); 
    } 
    else { 
     togglePanel(button, true); 
    } 
    //handle the clicking of the show/hide toggle button 
    button.click(function() { 
     //toggle the panel as required, base on current state 
     if (button.text() === "+Показать блок контента") { 
      togglePanel($(this), true); 
     } 
     else { 
      togglePanel($(this), false); 
     } 
    }); 
}); 
function togglePanel(button, show) { 
    var panel = $('#KeywordsPanel'); 
    if (show) { 
     panel.removeClass('hidden'); 
     button.text('-Скрыть блок контента'); 
     $.cookie('currentToggle', '', { path: '/' }); 
    } 
    else { 
     panel.addClass('hidden'); 
     button.text('+Показать блок контента'); 
     $.cookie('currentToggle', 'hidden', { path: '/' }); 
    } 
} 

Это то, что у меня есть на данный момент - http://jsfiddle.net/HbPF5

Answer 1

, где у вас есть panel.removeClass ('скрытый'); и panel.addClass ('hidden');

вы можете заменить их JQuery показывать и скрывать методы и необязательно включать скорость

например

panel.hide('slow'); 

и

panel.show('slow'); 

другие эффекты могут быть использованы, страница DOCS JQuery здесь: http://api.jquery.com/category/effects/

Answer 2

Working DEMO

Попробуйте slideDown & методы slideUp JQuery в:

$(panel).slideDown('slow'); 

и

$(panel).slideUp('slow'); 

Примечание: Вы также не нужно, чтобы добавить или удалить класс дисплея с этим.