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

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

$.fn.slideFadeToggle = (speed, easing, callback){
return this.animate ({: '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>
<="http://.jquery.com/jquery-latest.min."></script>
</head>
<body>

<button>Скрыть/показать</button>
< id="area">
<="/tags//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>

Запись навигация

Top