СКРИПТЫ
ТЕГИ:
php (282)
js (144)
html (132)
css (99)
html tags (58)
jquery (39)
edit text (37)
php array (30)
form html (29)
fonts (22)
foto (21)
forum (19)
ruweb.net (19)
atom (19)
html book (17)
board (17)
Показать еще :
php file (16)
js method (16)
hosting (16)
svg (16)
link (15)
htaccess (13)
osclass (13)
color (13)
table (12)
path (12)
php date (11)
online (11)
yandex (11)
js delete (11)
icon (11)
jsphp (11)
input (11)
notepad (11)
form (10)
php img (10)
url (10)
mouse (9)
info (9)
img (7)
cookie (7)
comment (7)
task (7)
ftp (7)
php url (7)
dosite (6)
click (6)
hover (6)
js url (6)
reg.ru (5)
chart (5)
php get (5)
adminka (5)
value (5)
mb (5)
js id (4)
bbcode (4)
submit (4)
js form (4)
browser (4)
select (4)
search (4)
js copy (4)
iframe (4)
symbols (4)
captcha (3)
https (3)
js post (3)
vk (3)
scandir (3)
js time (3)
ssl (3)
vs code (3)
height (2)
details (2)
youtube (2)
tag hr (2)
sitemap (2)
title (2)
ukoz (2)
cursor (2)
console (2)
seo (2)
js vars (2)
video (2)
smile (1)
windows (1)
numbers (1)
archive (1)
header (1)
books (1)
domen (1)
padding (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
Пользуйтесь на здоровье! Не забудьте сказать спасибо
Название скрипта :Появление блока при нажатии(показать, скрыть)
Ссылка на скачивание : Все скрипты на одной странице
Теги :

Сообщение системы комментирования :

01.09.2021

Форма пока доступна только админу... скоро все заработает...надеюсь...

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
17.10.2021 39:28
Давно не делал и страницу и видео в один день... чет, как-то выжитый как…
подробнее.
Марат :
10.10.2021 17:20
Добавлен новый смайл
подробнее.
Марат :
05.10.2021 26:37
Страница sitemap.html восстановлена. Но будут вводиться только страницы…
подробнее.
Марат :
04.10.2021 38:22
Добавил несколько вариантов поставить смайл на страницу своего сайта! 3 варианта! Кроме варианта скачать…
подробнее.
Марат :
17.09.2021 28:02
Установка Яндекс поиск на сайт! Контент обновлен на 100%. Такое ощущение, что старый текст не я…
подробнее.
Марат :
07.09.2021 23:21
Частенько приходится исправлять ошибки и вот...как-то я обратил внимание на надпись: "нажми ctrl enter" на сайте и…
подробнее.
ruweb