ГЛАВНАЯ | HTML | CSS | PHP | JS | ЕЩЁ |

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

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

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

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

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

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

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

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

И как обычно весь код в сборе можно будет скачать по ссылке в самом низу страницы!

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

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

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

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

</div>

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

Для этого нам понадобится:

1.Библиотека jquery
2. hasClass
3. removeClass
4. addClass

Ещё: Нажать на кнопку показать поле
Видимость блока javascript
Показать блок – скрыть блок нажав по странице

Посмотреть пример и скачать можно по ниже идущей ссылке

Скрипт № 39.3
Название скрипта и номер :Появление блока при нажатии(показать, скрыть)
Пример - Появление блока при нажатии(показать, скрыть)
Скачать - архив
Все скрипты на одной страницеС вашими куками, что-то не то..., попробуете перезагрузить страницу..
Теги:
скрыть показать блок по кликупоказать скрыть блок jquery показать скрытый блок показать скрыть блок jquery скрыть показать блок +по клику js показать скрыть блок jquery скрыть показать блок при клике

Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2019