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

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

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

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

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

Плавное появление и исчезание блока при нажатии 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




Альтернативный скрипт - Плавное появление и исчезание блока при нажатии 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>

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




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

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


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

hasClass

removeClass

addClass

Мы как-то разбирали несколько вариантов появление и исчезновение блока при перезагрузке страницы теория, живой пример, а эта тема основана на 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 скрытие и показывание блока срабатывала нам нужно в первом случае добавить стиль, который задвинет наш блок влево за край монитора, и сделаем условие, если этот стиль присутствует, то ничего не делаем, если нет, то добавляем другой стиль..




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

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

Пример без querySelector

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

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




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

Обновил архив - добавил первый вариант - это файл block_hide_and_show0_1.html