|
|
Модератор форума: Yuri_G |
Сообщество uCoz » Вебмастеру » Общие вопросы от вебмастеров » Как свернуть элемент на странице (с помощью CSS) |
Как свернуть элемент на странице |
На странице http://proekt174.ru висит баннер Акция, который при наведении мышки раскрывается. Как сделать чтобы он был изначально раскрытым при загрузке страницы и сворачивался через 2сек после загрузки страницы. При этом мог и дальше вылазить при наведении мыши
|
У меня как раз для раскрытия элемента стоит CSS свойство
Код transition: all 0.2s еase; А вот как его применить для сворачивания не могу сообразить |
5elementov, CSS может реагировать на наведение, фокус, активность и другие мелочи. На загрузку страницы они реагировать не могут. Единственный вариант, который приходит в голову — не будет скорее всего рабочим, но всё-таки напишу.
Перед </head> создать слить с открытым меню. А потом перед </body> этому стилю прописать закрытость. Но работоспособность не доказана. А вообще — делаем его изначально открытым. Дальше на jQuery пишем код: Код <script> $(document).ready(function() { $('#ID-тогочтохотим скрыть').css('display','none'); } </script> |
<script>$(document).ready(function() { $('#ID-тогочтохотим скрыть').css('display','none'); } </script> Поставьте задержку в две секунды. НАпример: Код transition:all 1s linear 2s; |
K1l0, пытался найти что не так — забыл скобку. Бывает.
Код <script> $(document).ready(function() { setTimeout(function(){ $('#ID-тогочтохотим скрыть').css('display','none'); },200); }); </script> Насчёт вашего решения не согласен — автору топика нужно чтобы изначально при загрузке страницы первые две секунды контент с акциями отображался. Потом через две секунды после загрузки страницы — он скрылся. Соответственно для этого нужно поменять свойство CSS через две секунды. При загрузке страницы display:block, например, а после загрузки (спустя две секунды) — display:none. http://jsfiddle.net/Lqny5xsb/ — вот рабочий пример. Сообщение отредактировал 0RJ0 - Пятница, 15 Май 2015, 21:06:55
|
Там (в демо) Вы, видимо, забыли дописать функцию setTimeout. Я бы, все таки, юзал что-нибудь "покороче", чем возиться со стилями.
Код $('.hello').remove(); Код $('.hello').hide(); Код $('.hello').slideUp(); Код function hideHello() { $('.hello').hide(); } setTimeout(hideHello, 2000) https://jsfiddle.net/vmduavvp/3/ Это тоже работает. Ведь изначально стоял вопрос используя CSS Сообщение отредактировал K1l0 - Пятница, 15 Май 2015, 22:10:47
|
| |||
| |||