Многие из вас знают, что есть такая функция fadeToggle, позволяющая открывать и закрывать блоки кликом по одному и тому же элементу, но, к сожалению, не всех устраивает простой эффект выезжания, а эффект fadeToggle не предусмотрен в текущих версиях библиотеки jQuery и, в этом уроке я покажу вам простой и компактный способ реализации данной функции
Для начала после /head вставляйте:
Code
<script>
$(document).ready(function() {
$("#stuff").toggle(function() {
$(".stuff0").animate({
height: 'hide',
opacity: 'hide',
}, 'slow');
}, function() {
$(".stuff0").animate({
height: 'show',
opacity: 'show'
}, 'slow');
});
});
</script>
Разберём настройки: stuff - ID элемента, при клике на который будет открываться/закрываться нужный блок
stuff0 - класс блока, который будет открываться или закрываться
slow - это скорость открытия/закрытия блока (slow. normal, fast)
Далее прописываем ссылку, которая будет открывать/закрывать блок:
Code
<a href="#" id="stuff">Клик!</a>
Так прописывается сам блок с контентом:
Code
<div class="stuff0">Здесь будет любой ваш контент</div>
Материал подготовлен Apocalypse
Мини-профиль
