Объединение Slide и Fade эффектов

Эффекты .hide() и .show() скрывают и показывают элементы за счет изменения их прозрачности, высоты и ширины одновременно, slide-эффекты делают это за счет изменения высоты, а fade-эффекты изменяя только прозрачность у элементов. Если вам потребуется скрывать и показывать элементы за счет изменения прозрачности и высоты (не трогая ширину элементов), то можно расширить возможности jQuery и добавить туда новый метод — slideFadeToggle(speed,easing,callback):

$.fn.slideFadeToggle = function(speed, easing, callback){
  return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
};

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

~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~style~gt~
    #area{border:1px solid gray; padding:8px;}
    img{float:left; position:relative; top:6px; margin-right:8px}
  ~lt~/style~gt~
  ~lt~script src="https://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
~lt~/head~gt~
~lt~body~gt~

  ~lt~button~gt~Скрыть/показать~lt~/button~gt~
  ~lt~div id="area"~gt~
    ~lt~img src="/tags/images/100usd.jpg" alt=""/~gt~
    Крупнейший по номиналу федеральный резервный билет США с 1969 года 
    (хотя выпущенные ранее более крупные купюры номиналами 500, 1000, 5000 
    и 10 000 долларов действительны). В настоящее время в обращении 
    находятся билеты серий 1996—2006.
    ~lt~div style="clear:both"~gt~~lt~/div~gt~
  ~lt~/div~gt~

  ~lt~script~gt~
    $.fn.slideFadeToggle = function(speed, easing, callback){
      return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
    };

    $('button').click(function(){
      $('#area').slideFadeToggle('slow');
    });
  ~lt~/script~gt~

~lt~/body~gt~
~lt~/html~gt~

Используемые методы jQuery

• animate()
• click()