Jquery div плавное появление: Плавное появление блока (div) в Jquery

Содержание

Плавное появление изображений при загрузке страницы

$(function(){

    /*плагин*/

    (function($){

        $.fn.liImageLoad = function(){

            return this.each(function(){

                var imgEl = $(this),

                    imgElHeight = imgEl.attr('height'),

                    imgElSrc = imgEl.data('src'),

                    imgElPosTop = imgEl.offset().top,

                    imgElPosBot = (imgElPosTop + imgEl.outerHeight()),

                    wH = $(window).height(),

                    wT = $(window).scrollTop(),

                    wB = (wT + wH),

                    f1 = false,

                    data = 'data:image/gif;base64,R0lGODlhMgAyAIAAAO7u7gAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjAgNjEuMTM0Nzc3LCAyMDEwLzAyLzEyLTE3OjMyOjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkU3RDVGRjNGQjRFMTFFMTk5OEVCNEEyNEEzOUZFMTciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkU3RDVGRjRGQjRFMTFFMTk5OEVCNEEyNEEzOUZFMTciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCRTdENUZGMUZCNEUxMUUxOTk4RUI0QTI0QTM5RkUxNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCRTdENUZGMkZCNEUxMUUxOTk4RUI0QTI0QTM5RkUxNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgH//v38+/r5+Pf29fTz8vHw7+7t7Ovq6ejn5uXk4+Lh5N/e3dzb2tnY19bV1NPS0dDPzs3My8rJyMfGxcTDwsHAv769vLu6ubi3trW0s7KxsK+urayrqqmop6alpKOioaCfnp2cm5qZmJeWlZSTkpGQj46NjIuKiYiHhoWEg4KBgH9+fXx7enl4d3Z1dHNycXBvbm1sa2ppaGdmZWRjYmFgX15dXFtaWVhXVlVUU1JRUE9OTUxLSklIR0ZFRENCQUA/Pj08Ozo5ODc2NTQzMjEwLy4tLCsqKSgnJiUkIyIhIB8eHRwbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACH5BAAAAAAALAAAAAAyADIAQAIzhI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8YhMKicFADs='

                    

                    imgEl.

attr('src',data)

                

                function imgElPos(){    

                    if(f1 == false){

                        if(imgElPosBot > wT && imgElPosTop < wB){

                            f1 = true;

                            imgEl.attr('src',imgElSrc).load(function(){

                                imgEl.css({opacity:'0'}).animate({opacity:'1'});

                            });

                        }

                    }

                }

                imgElPos();

                $(window).on('scroll',function(){

                    wH = $(window).height();    

                    wT = $(window).scrollTop();

                    wB = (wT + wH);

                    imgElPos()

                })

            });

        };

    })(jQuery);

    

    /*инициализация плагина*/

    $('img[data-src]').liImageLoad();

});

Анимация появления блоков для Landing Page и не только при помощи fm.revealator.jquery.js

Начну с того что данная анимация должна применяться не на всех подряд сайтах, а так же не советую применять анимацию для главного экрана страницы.

Главный экран – сразу появляющаяся верхняя часть страницы при загрузке сайта.

Но в общем, для многих сайтов данная анимация не чем не повредит, и даже придаст динамичность, новизну и приятный вид веб проекту. Главное не “пихать” анимацию с “фанатизмом”.

Revealator

Revealator – это простой плагин анимации, запускаемый из области просмотра, который анимирует любые элементы с помощью пользовательских эффектов CSS3 при их прокрутке в окне просмотра.

В этом посте мы рассмотрим jQuery плагин Revealator, при помощи которого Вы сможете реализовать красивую анимацию блоков, почти не вдаваясь в детали разработки cкрипта. Все что вам нужно будет сделать это подставить определенные классы предоставленные revealator к элементам которые Вы хотите анимировать, чтобы те, в свою очередь, появлялись в области просмотра браузера с эффектом, закрепленным под тем или иным классом.

Особенности

  • Определяет, находится ли элемент в области просмотра, и добавляет к нему класс
  • 8 встроенных анимаций на основе анимации CSS3.
  • Вы можете добавить свои собственные эффекты, используя CSS3.
  • Пользовательская продолжительность анимации и задержка.

Как работает плагин

Плагин Revealator состоит из двух основных файлов:

fm.revealator.jquery.css – CSS стили эффектов,

fm.revealator.jquery.js – скрипт.

Для работы плагина, необходимо наличие подключенной библиотеки jQuery.

Краткая инструкция по работе с плагином
  1. Загрузите таблицу стилей fm.revealator.jquery.css в head раздел и fm.revealator.jquery.js в конец документа.
    <link rel="stylesheet" href="fm.revealator.jquery.css">
    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="fm.revealator.jquery.js"></script>
    
  2. Укажите тип эффекта, который вы хотите применить к элементу, когда он появляется.
    revealator-fade
    revealator-rotateleft
    revealator-rotateright 
    revealator-slideleft 
    revealator-sliderightt
    revealator-slideup
    revealator-ZoomIn
    revealator-ZoomOut     

Что бы в верстке объект выглядел примерно так:

При добавлении класса revealator-once к элементам, анимация блоков будет происходить лишь один раз. При отсутствии этого класса, анимация будет повторяться при прокрутке вверх и в низ.

Анимация

Обычное появление элемента

Появление элемента с легким поворотом влево

Появление элемента с легким поворотом вправо

Появление элемента слайдом справа на лево

Появление элемента слайдом слева на право

Появление элемента слайдом снизу на вверх

Появление элемента с эффектом увеличения от большого к меньшему

Появление элемента с эффектом увеличения от меньшего к большему

Задержка:

Установить задержку эффекта на 100ms

Установить задержку эффекта на 200ms

Установить задержку эффекта на 300ms

Установить задержку эффекта на 1900ms

Установить задержку эффекта на 2000ms

Продолжительность:

Установить длительность эффекта на 100ms

Установить длительность эффекта на 200ms

Установить длительность эффекта на 300ms

… … Установить длительность эффекта на 1900ms

Установить длительность эффекта на 2000ms

Полезные ссылки

Глянуть на работу плагина в живую

jQuery-Revealator готовый пример применения

Так же не плохой пример от коллеги по цеху

И еще от одного коллеги

Revealator страница на GitHub

https://github. com/QODIO/revealator

Загрузить Revealator

Источник записи: https://techblog.sdstudio.top

fit_modal - npm

EN

View documentation

RU

_

Адаптивное модальное окно для контента с возможностью ajax загрузки

DEMO

_

Возможности:
  • Простая html структура
  • Три типа реализации в html:
    • только блок контента, который автоматически обернется нужными элементами,
    • полный html модального окна,
    • загрузить контент через ajax (с использованием любого из двух предыдущих вариантов)
  • 32 опции для полной настройки плагина
  • 6 событий + 2 обратных события + пользовательские функции
  • Широкий спектр применения (по дефолту активироваться кликом по элементу, но также с легкостью можно повесить активацию на любое другое событие)
  • Несколько типов анимации появления а так же легкое создание и присвоение своих анимаций через css
  • Пользовательская настройка адаптивности
  • Простая настройка ajax возможностей
  • Подходит для BEM структуры проекта
Быстрый старт:
Подключаем:
  • jquery.fit_modal.css
  • jquery.fit_modal.js

или

  • jquery.fit_modal.min.css
  • jquery.fit_modal.min.js

из папки dist

Для нормальной работы плагина требуется:
  • normalize.css или reset.css
  • jQuery 1.8.3+
Тип 1:

 

<button class="btn__active-modal" 

    data-title="Feedback form" 

    data-win-animation="fade_in_top" 

    data-content_block=".content__wrap">

    Open modal

</button>

 

<div class="content__wrap">Hallo world!</div>

 

<script>

    $(window).ready(function () {

        

        

        $('.btn__active-modal').fit_modal();

        

    });

</script> 

 

Если у вас на странице несколько типов контента, то каждый будет отдельным модальным окном

Аттрибуты:

  • data-title - Заголовок модального окна
  • data-win-animation - Анимация появления окна (по умолчанию: fade_in)
  • data-content_block - указывает класс обертки контента
  • data-href - если включен ajax мод, сюда пишется ссылка на документ или сервер, откуда нужно брать контент

Атрибуты имеют приоритет над опциями!

Тип 2:

 

<button class="btn__active-modal" data-content_block=". content__wrap_1">

    Open modal №1

</button>

<button class="btn__active-modal" data-content_block=".content__wrap_2">

    Open modal №2

</button>

 

<div class="modal__frame">

    <div class="modal__window">

        <div class="modal__window__header">

            <div class="modal__window__close"></div>

            <div class="modal__window__title"></div>

        </div>

        <div class="modal__window__body">

            <div class="content__wrap_1">Hallo world!</div>

            <div class="content__wrap_2">I'm alive!</div>

        </div>

    </div>

</div>

 

<script>

    $(window).ready(function () {

        

        

        $('.btn__active-modal_1').fit_modal({

            fast_create : false,

            window_animation_type   : 'fade_in_top',

            frame_animation_speed   :  400, 

            modal_title  :  'Hallo world!',

        });

        $('.btn__active-modal_2').fit_modal({

            fast_create : false,

            window_animation_type   : 'fade_in_left',

            win_animation_speed     :  200, 

            modal_title  :  "I'm alive!",

        });

    });

</script> 

 

Такой вариант активации позволяет запускать в одном модальном окне несколько типов контента с разными параметрами, что может быть полезно в некоторых ситуациях и существенно сокращает количество html кода на странице

Тип 3:

 

<button class="btn__active-modal" data-href="test.html">

    View document

</button>

 

<div class="content__wrap_ajax"></div>

 

<script>

    $(window).ready(function () {

        

        

        $('. btn__active-modal').fit_modal({

            on_ajax_mod  :  true,

            modal_content_block : 'content__wrap_ajax',

            modal_title : 'View document',

            window_animation_type  : 'fade_in_top'

        });

    });

</script> 

 

Таким способом вы можете подгрузить контент через ajax

У ajax мода есть свои настройки:

    $('element').fit_modal({

        on_ajax_mod  :  true,

        ajax_mod                : { 

            href      :  null, 

            post_type :  'GET', 

            data      :  null, 

            error_message : "Server error or page not found.", 

            success_custom_func : null, 

            error_custom_func : null 

        },

    });

Адаптивность

    $('element').fit_modal({

        responsive_mod          : {  

            media : 0, 

            on_custom : null, 

            off_custom : null, 

            custom_func : null 

        }

    });

В параметре media указывается с какого разрешения запускать адаптивность (по умолчанию 768px). 0 - адаптивность отключена. Остальные параметры это пользовательские функции.

Быстрая стилизация

    $('element').fit_modal({

           window_style : {

               "background" : "rgba(110, 117, 142, 0.5)"

           },

           frame_style : {

               "borderRadius" :  "15px"

           }, 

    });

  • frame_style - Стиль фона
  • window_style - Стиль окна

Можно задать любые параметры css.

API

Опции
Name Default Description
modal_frame .modal__frame Класс общей обертки (фона) модального окна
modal_window . modal__window Класс модального окна
modal_body .modal__window__body Класс тела модального окна
modal_title_class .modal__window__title Класс заголовка модального окна
modal_title Modal window Заголовок модального окна
modal_content_block null Класс обертки контента
frame_animation_speed 300 Скорость анимации фона
win_animation_speed 500 Скорость анимации окна
window_animation_type fade_in_top Тип анимации окна
modal_close .modal__window__close Класс кнопки закрытия
fast_create true Сгенерировать модальное окно и обернуть им контент
active_custom_func null Пользовательская функция активируется при включении окна
close_custom_func null Пользовательская функция активируется при закрытие окна
window_style {} Быстро задать стили окна
frame_style {} Быстро задать стили фона
on_ajax_mod false Включить Ajax мод (Загрузка внешнего контента)
ajax_mod {options} Опции ajax
close_on_bg true Закрывать окно кликом по фону
responsive_mod {options} Настройки адаптивности
fix_fw_el null Исправляет прыгание fixed элементов с 100% шириной (нужно добавить класс элемента)
fix_right_el null Коррекция фиксированного и абсолютного элементы с позиционированием по правому краю (вам нужно добавить класс элемента)
ajax_mod
Name Default Description
href null Ссылка на страницу или сервер
post_type 'GET' Тип запроса
data null Что передать нужно отдать на сервер
error_message Server error or page not found. Сообщение об ошибке
success_custom_func null Функция при успешной отправке
error_custom_func null Функция при ошибке
responsive_mod
Name Default Description
media 0 Разрешение ниже которого включается адаптивность
on_custom null Функция при включении адаптивности
off_custom null Функция при выключении адаптивности
custom_fun null Функция при смене разрешения
Анимации
  • fade_in - Плавное появление
  • fade_in_top - Плавное появление сверху
  • fade_in_down - Плавное появление снизу
  • fade_in_left - Плавное появление слева
  • fade_in_right - Плавное появление справа
  • zoom_in - Плавное увеличение
События
  • fm.onActive - При Активации модального окна
  • fm.onWindow - При Появлении контентной области модального окна
  • fm.onClose - При закрытии модального окна
  • fm.onCloseFrame - При полном закрытии модального окна
  • fm.onResponsive - При включении адаптивности
  • fm.offResponsive - При выключении адаптивности

   var this_modal = $('element').fit_modal();

 

   this_modal.on('fm.onActive', function() {

       console.log('wow!')

   });

##### Пользовательская функция

     $('element').fit_modal({

        active_custom_func : function (el, id) {

            console.log(el);

            $(this.modal_content_block).html('ID your modal window' + id.slice(1));

        }

     });

В примере мы вывели в консоль объект на который был произведен клик и произвольно сгенерированный индикатор модального окна в область контента.

Обратное событие

    

    var element = $('element'). fit_modal({

        modal_title : 'Hallo World!',

        modal_content_block : '.content-block',

        window_animation_type   : 'fade_in_top'

    });

    

    function active_modal() {

        return element.trigger('on.modal.active');

    }

    

     setTimeout(active_modal, 5000);

В данном примере мы активируем модальное окно на странице через 5 секунд после ее загрузки используя обратное событие on.modal.active

Обратное события

  • on.modal.active - активация модального окна
  • on.modal.close - закрытие модального окна

Планы по развитию плагина

  • Возможность переключения между модальными окнами (пролистывание) при помощи встроенного интерфейса
  • Встроенный мод галереи изображений

Build

 

__dist     -->  Файлы плагина

__dist_src -->  Исходники плагина

__public   -->  Файлы демо страницы

______Css           -->  Стили  (minify)

______fonts         -->  Шрифты     

______Js            -->  javaScript (minify)

______img           -->  Изображения

__src      --> Исходники демо страницы

______components    -->  Компоненты

______js            -->  javaScript (not minify)

______css           -->  css (not minify)

______nib           -->  функции для stylus

______plugins       -->  Плагины

 

По всем вопросам пишите на e-mail: [email protected]

Лицензия

© Philipp Zhulev MIT License.

jQuery fadeOut (расширенный) | Кевин Чисхолм

Метод jQuery fadeOut может принимать несколько аргументов. Вы можете установить продолжительность, замедление, а также предоставить обратный вызов завершения

Скрытие элементов DOM, безусловно, является общей задачей для любого веб-разработчика интерфейса
, а метод jQuery.fadeOut () позволяет не только скрыть элемент, но и анимировать это действие. Теперь, хотя постепенное исчезновение может улучшить пользовательский опыт, для веб-разработчика было бы неплохо иметь некоторый контроль над этим.К счастью, метод jQuery.fadeOut () обеспечивает именно это. Благодаря некоторым расширенным функциям, которые позволяют определять продолжительность анимации и эффект замедления, он управляет «ощущением» этой анимации. Другими словами, мы не просто хотим переместить объект из точки A в точку B; мы хотим, чтобы это движение имитировало движение объектов в реальном мире. Мы также можем передать функцию обратного вызова методу jQuery.fadeOut () , который позволяет нам действовать после успешного завершения постепенного исчезновения этого элемента DOM.Хотя вам не всегда нужно пользоваться этой функцией, это, безусловно, очень важно знать об этом. Дело в том, что способность надежно действовать после успешного завершения анимации - это бизнес-требование, которое возникает чаще, чем многие могут подумать.

Существует нечеткая линия между методами jQuery hide , fadeOut и animate . В конце концов, все они используют анимацию jQuery. В методе fadeOut , если вы не передаете аргументов, совпадающие элементы исчезают с длительностью 800 мс (0.8 секунд). Но если вы хотите, чтобы постепенно исчезал с элементов, вы можете указать настраиваемую продолжительность, замедление и обратный вызов, когда метод fadeOut завершится.

Попробуйте сами!

В приведенном выше примере нажмите кнопку с надписью: «Угасание абзаца». Вы заметите, что абзац постепенно исчезает. Вторая кнопка просто обновляет страницу, так что пример можно легко повторять снова и снова.

Теперь перейдите на вкладку HTML . Вы увидите встроенную таблицу стилей (элемент style ). Здесь мы определяем класс .done , который утверждает, что любой элемент с этим классом имеет зеленый фон и белый текст. Когда вы запустите пример кода, вы заметите, что после завершения анимации фон кнопки изменится на зеленый с белым текстом.

Теперь перейдите на вкладку JavaScript . Для элемента есть обработчик события щелчка: button # fadeOut .При нажатии этой кнопки метод jQuery fadeOut вызывается для каждого элемента абзаца на странице (в данном случае только один).

Обратите внимание, что методу jQuery fadeOut передаются три аргумента. Первый аргумент - это свойство duration , которое имеет значение: 2000 . Это означает, что постепенное исчезновение абзаца должно длиться 2000 миллисекунд, или две секунды . Второй аргумент: «качели» - для смягчения.Это делает анимацию более реалистичной. Третий аргумент - это функция. Эта функция обратного вызова будет выполнена после завершения постепенного исчезновения. Внутри этой функции мы меняем текст кнопки на «Затухание завершено!» . Также мы добавляем класс «готово» .

8 демонстраций table, menu, div и др.

Назначение методов затухания

Методы затухания jQuery используются для скрытия или отображения элементов HTML с эффектом затухания.Если элемент виден, то его можно скрыть с эффектом затухания с помощью метода $ .fadeOut .

Чтобы показать скрытые элементы непрозрачными, вы можете использовать метод $ .fadeIn .

Ниже приведены несколько онлайн-демонстраций, демонстрирующих эти методы вместе с методами $ .fadeToggle и $ .fadeTo с синтаксисом.

Общий синтаксис для использования метода $ .fadeIn jQuery:

$ (селектор). fadeIn (скорость, обратный вызов);


Где селектор может быть блоком, абзацем, кнопками, ссылками и полной строкой меню для левой, верхней панели навигации или других компонентов на веб-странице.

В этом примере я создал меню, используя несколько элементов HTML вместе с некоторыми стилями CSS. Нажмите кнопку, чтобы отобразить меню с эффектом затухания:

См. Онлайн-демонстрацию и код

По мере загрузки демонстрационной страницы вы можете увидеть кнопку «Выполнить метод fadeIn».Когда вы щелкнете по нему, оно станет непрозрачным.

В случае нажатия этой кнопки выполняется следующий сценарий, содержащий метод jQuery fadeIn:


Как видите, модель .Класс men_ex , присвоенный div (меню), используется в качестве селектора в методе fadeIn. После загрузки демонстрационной страницы меню остается скрытым с помощью CSS-свойства display: none в разделе