В связи с переходом на новый движок... возможны сбои в работе! Простите!
Работы производятся прямо сейчас 19-03-2024! 🞨
Меню :
keyframes (10)
js tag (56)
click (6)
jquery (42)
js (244)



Blog (1392)
php (329)
js (244)
html (147)
css (131)
html tags (62)
js tag (56)
jquery (42)
text (37)
js method (36)
php array (33)
js date (33)
form html (30)
online (29)
Показать еще :
fonts (26)
ruweb.net (25)
foto (22)
php file (20)
atom (20)
forum (19)
hosting (18)
svg (18)
input (18)
php date (17)
board (16)
php time (16)
html book (16)
color (15)
info (15)
img (14)
js time (14)
js url (14)
js events (14)
htaccess (13)
select (13)
notepad (13)
osclass (13)
keyboard (12)
знак (12)
dw block (12)
php img (12)
php path (12)
table (12)
download (12)
icon (11)
form (11)
jsphp (11)
alphabet (10)
keyframes (10)
js delete (10)
yandex (10)
mouse (10)
chart (9)
hover (9)
dosite (8)
browser (8)
php post (7)
comment (7)
php url (7)
iframe (6)
php get (6)
mysql (6)
click (6)
list (6)
canvas (6)
adminka (6)
vs code (6)
js id (5)
mb (5)
heading (5)
value (5)
reg.ru (5)
ftp (5)
year (5)
js math (5)
tag a (5)
bbcode (4)
php var (4)
base64 (4)
xml (4)
scandir (4)
games (4)
flags (4)
symbols (4)
week (4)
day (4)
ssl (4)
нок (4)
submit (4)
task (4)
vk (4)
month (4)
pages (4)
console (4)
js form (4)
domen (3)
line (3)
https (3)
js post (3)
jquery post (3)
money (3)
numbers (3)
js img (3)
padding (3)
куб (3)
captcha (3)
ucoz (3)
js hash (3)
tag hr (2)
details (2)
typeof (2)
seo (2)
prompt (2)
sitemap (2)
рся (2)
youtube (2)
height (2)
arrows (2)
js vars (2)
counter (2)
google (2)
qr kod (2)
video (2)
speed (1)
smile (1)
нод (1)
rutube (1)
scroll (1)
windows (1)
archive (1)
jino (1)
cursor (1)

Плавно скрыть показать блок по клику пример

Плавное появление и исчезновение блока при нажатии! Сегодня будем с этим разбираться!

Сразу скажу, что в программировании возможно множество вариантов… данный код появления и исчезновение блока был написан потому, что в сети не нашлось достойного варианта! Простого! Понятного! Огромные портянки кода… в которых ногу можно сломать!

Пишите просто! Иначе потом сами не поймете. Что понаписали…

Навигация по странице :
  1. Плавное появление и исчезание блока при нажатии JavaScript
  2. Альтернативный скрипт - Плавное появление и исчезание блока при нажатии JavaScript
  3. Плавное появление блока css при клике jquery
  4. Живые примеры плавного появления и скрытия блока
  5. Скачать скрипты плавного появления и скрытия блока

  1. Плавное появление и исчезание блока при нажатии JavaScript

    №1 пример первого варианта.

    Html код выдвижного блока:

    1). Нам потребуется блок, в котором будет сидеть весь контент, и который будет плавно задвигаться-выдивгаться:

    <div class="block" id="theid">

    здесь контент

    </div>

    2). Во внутрь помещаем крест, по нажатию на который наш блок будет двигаться:

    <div id="iks">X</div>

    3). Соберем html вместе:

    <div class="block" id="theid"><div id="iks">X</div>

    здесь контент

    </div>

    Script код выдвижного блока:

    Нам нужно обратиться к тегу , будем использовать querySelector:

    click_iks = document.querySelector ('#iks');

    theid = document.querySelector ('#theid');

    На нажатие(onclick) по крестику повесим функцию:

    click_iks . onclick = function( ) {

    в которой и будем проверять наличие - отсутствие класса, который и будет выполнять движение влево вправо.

    Проверяем содержит ли(contains) класс(classList) под именем hide в переменной theid:

    if ( theid . classList . contains('hide') )

    Если да(блок задвинут), то hide удаляем, show добавляем:

    theid . classList . remove('hide');

    theid . classList . add('show' );

    Если нет(блок выдвинут),то задвигаем панель...:

    theid . classList . add('hide');

    theid . classList . remove('show');

    Соберем все вместе...

    <script>

    click_iks = document.querySelector ('#iks');

    theid = document.querySelector ('#theid');

    click_iks . onclick = function( ) {

    if ( theid . classList . contains('hide') )

    {

    theid . classList . remove('hide');

    theid . classList . add('show' );

    }

    else

    {

    theid . classList . add('hide');

    theid . classList . remove('show');

    }

    }

    </script>

    Все стили из одного места

    Результат :плавное появление блока на странице при клике JavaScript


  2. Альтернативный скрипт - Плавное появление и исчезание блока при нажатии JavaScript

    Чем данный вариант пример №2 отличается от выше идущего пункта!?

    1). Эти две строки не нужны, удалим их:

    click_iks = document.querySelector ('#iks');

    theid = document.querySelector ('#theid');

    2). Заменим click_iks на название ид theid - так тоже будет работать! Только теперь блок может плавно выезжать и скрываться не только точно нажимая по крестику, но и в том месте, где невидимо развернут блок с id+theid :

    <script>

    theid . onclick = function( ) {

    if ( theid . classList . contains('hide') )

    {

    theid . classList . remove('hide');

    theid . classList . add('show' );

    }

    else

    {

    theid . classList . add('hide');

    theid . classList . remove('show');

    }

    }

    </script>

    Все остальное копия первого варианта.


  3. Плавное появление блока css при клике jquery

    См.результат на отдельной странице

    Чем отличается данный вариант плавного появления блока css при клике jquery - этот вариант скрипт написан на jquery. Естественно,что вы должны подключить jquery, нам понадобится:

    Мы как-то разбирали несколько вариантов появление и исчезновение блока при перезагрузке страницы теория, живой пример, а эта тема основана на css той страницы, только с той разницей, что здесь мы данный код css, который отвечает за появление и исчезновения блока - будем присваивать этому блоку, после чего css должен сработать!

    Единственное, что добавим… ещё нам потребуется движение влево

    <div class="share" id="share"><div id="to_right">X</div>

    здесь вы можете расположить все,что угодно...

    </div>

    Css стили для всех трех вариантов плавного появления скрытия блока

    .share_hide

    {

    left: -40px;

    animation:textt 1s;

    }

    @keyframes textt {

    from { left: 4px;}

    to {left: -40px;}

    }

    и движение вправо…

    .share_show

    {

    left: 4px;

    animation:texttt 1s;

    }

    @keyframes texttt {

    from { left: -40px;}

    to {left: 4px;}

    }

    Напишем функцию(click), которая будет работать при каждом клике на объект с ид = to_right

    И далее будем проверять есть ли класс «share share_hide»

    Если есть будем очищать класс(removeClass) и добавлять (addClass) тот, который будет показывать……

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

    Не забываем, что это написано с использованием jquery

    <script>

    $("#to_right").click(function() {

       if ( $("#share").hasClass("share share_hide") )

       {

       $("#share").removeClass( );

       $("#share").addClass("share share_show");

       }

       else

       {

       $("#share").removeClass( );

       $("#share").addClass("share share_hide");

       }

    });

    </script>

    Можно написать короче...

    <script>

    $("#to_right").click(function() {

       if ( $("#share").hasClass("share share_hide") )

       {

       $("#share").removeClass().addClass("share share_show");

       }

       else

       {

       $("#share").removeClass().addClass("share share_hide");

       }

    });

    </script>

    И для того, чтобы css скрытие и показывание блока срабатывала нам нужно в первом случае добавить стиль, который задвинет наш блок влево за край монитора, и сделаем условие, если этот стиль присутствует, то ничего не делаем, если нет, то добавляем другой стиль..


  4. Примеры плавного появления и скрытия блока по клику

    Плавное появление блока на странице при клике JavaScript

    Пример без querySelector

    Плавное появление блока с использованием jquery

    См.еще выдвижная панель + живой пример


  5. Скачать скрипты плавного появления и скрытия блока

    Обновил архив - добавил первый вариант - это файл block_hide_and_show0_1.html
Не стесняемся говорить спасибо!
Помочь проекту DwWeb.ru

Поделиться ссылкой! C друзьями или врагами!

Этим вы очень поможете проекту! Заранее огромное спасибо!

Ещё : dwweb.ru есть здесь:
ruweb
Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2024 Контакты. Реклама на сайте Лучший хостинг : RUWEB + помощь по RUWEB
Страница загружена за : 0.023795 секунд. Подробнее