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

Эффекты .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);
};После этого, можно будет поочередно скрывать и показывать элементы страницы за счет изменения их прозрачности и высоты:

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

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

<script>
$.fn.slideFadeToggle = function(speed, easing, callback){
return this.animate({opacity: ‘toggle’, height: ‘toggle’}, speed, easing, callback);
};

$(‘button’).click(function(){
$(‘#area’).slideFadeToggle(‘slow’);
});
</script>

</body>
</html>