Главная » Файлы » Прочие скрипты » jQuery

Простой спойлер с эффектом toggle fade (Плавное появление, исчезание) на jQuery
23.06.14, 08:14:21

Скачать файл




Данный спойлер - очередной простой плагин на jQuery, Который обеспечивает плавное появление и исчезание нужного нам контента при нажатии на определённую ссылку.

Для начала посмотрите ДЕМО

Если демо вам понравилось, приступаем к установке:

После /head или /body вставляйте следующий код:
Код
<script>  
  jQuery.fn.fadeSliderToggle = function(settings) {  
/* Damn you jQuery opacity:'toggle' that dosen't work!~!!!*/  
settings = jQuery.extend({  
speed:500,  
easing : "swing"  
}, settings)  

caller = this  
if($(caller).css("display") == "none"){  
$(caller).animate({  
opacity: 1,  
height: 'toggle'  
}, settings.speed, settings.easing);  
}else{  
$(caller).animate({  
opacity: 0,  
height: 'toggle'  
}, settings.speed, settings.easing);  
}  
  };
  </script>
  <script type="text/javascript">
$(document).ready(function() {  
$(".fadeNext").click(function(){
$(this).next().fadeSliderToggle()  
return false;  
})  
});
</script>


Если вы слегка всмотритесь в код скрипта, то увидите, что скорость и степень прозрачности очень легко настраиваются

Далее в то место, где хотите видеть ссылку, при нажатии на которую будет открываться скрытый текст, вставляйте:
Код
<a href="#" class="fadeNext">Название ссылки</a>


Далее в то место, где будет появляться сам скрытый текст:
Код
<div style="display:none; opacity:0;" class="fader">Здесь любой ваш скрытый текст</div>


Всё! В прикреплённом архиве оригинал скрипта и рабочее демо. Пользуйтесь на здоровье!

Категория: jQuery | Добавил: Apocalypse | Теги: исчезание), (Плавное, появление, Fade, на, Спойлер, JQuery, toggle, эффектом, простой
Просмотров: 541 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: