Главная » Файлы » Прочие скрипты » 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> Всё! В прикреплённом архиве оригинал скрипта и рабочее демо. Пользуйтесь на здоровье! | |
Просмотров: 624 | Загрузок: 0 | |
Всего комментариев: 0 | |
| |