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

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

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

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

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

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

  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
Можете не благодарить, лучше помогите!
Название скрипта :Появление блока при нажатии(показать, скрыть)
Ссылка на скачивание : Все скрипты на одной странице
Теги :
Еще никто не прокомментировал! COMMENTS+   BBcode
Подписаться + =

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

Построение гравиков
Основа для графика : счетчик посещаемости.
На отдельной : странице.
dwweb.ru есть здесь:
Последние комментарии :
Марат :
14.03.2023 21:07
Так... это когда было то... в 2018 году... мне не нравится(не нравилось), как поиск по файлам... как-то коряво было…
подробнее.
Moubrey :
14.03.2023 20:52
Их там два можно поставить, еще и по бокам, а в них еще друге окна станут вкладками, обычный проводник и…
подробнее.
Марат :
26.02.2023 12:20
Спасибо за внимательность!
подробнее.
V :
26.02.2023 11:49
В массиве месяцев пропущен октябрь!
подробнее.
Марат :
02.02.2023 10:48
Я не знаю, что это ... Такое понятие - "определена"... я не понимаю, что такое... есть такая фигня в Js, там, бывают…
подробнее.
Артур :
02.02.2023 06:51
При копировании всего кода из 3 главы "Вывод всех файлов из папки ссылками на них", при выполнении скрипта…
подробнее.
ruweb
Страница загружена за : 0.022271 секунд. Подробнее