Страница 1 из 11
Модератор форума: Yuri_G 
Сообщество uCoz » Вебмастеру » Общие вопросы от вебмастеров » Как свернуть элемент на странице (с помощью CSS)
Как свернуть элемент на странице
5elementov
Сообщений: 23
Репутация: 4

Сообщение # 1 | 21:14:38
На странице http://proekt174.ru висит баннер Акция, который при наведении мышки раскрывается. Как сделать чтобы он был изначально раскрытым при загрузке страницы и сворачивался через 2сек после загрузки страницы. При этом мог и дальше вылазить при наведении мыши

K1l0
Сообщений: 104
Репутация: 26

Сообщение # 2 | 09:03:11
С помощью CSS никак. CSS конечно круто, но вот считать они еще не научились.
5elementov
Сообщений: 23
Репутация: 4

Сообщение # 3 | 19:22:20
У меня как раз для раскрытия элемента стоит CSS свойство 
Код
transition: all 0.2s еase;

А вот как его применить для сворачивания не могу сообразить

0RJ0
uWeb
Сообщений: 200
Репутация: 65

Сообщение # 4 | 19:39:00
5elementov, CSS может реагировать на наведение, фокус, активность и другие мелочи. На загрузку страницы они реагировать не могут. Единственный вариант, который приходит в голову — не будет скорее всего рабочим, но всё-таки напишу.
Перед </head> создать слить с открытым меню. А потом перед </body> этому стилю прописать закрытость. Но работоспособность не доказана. А вообще — делаем его изначально открытым. Дальше на jQuery пишем код:
Код
<script>
$(document).ready(function() {
     $('#ID-тогочтохотим скрыть').css('display','none');
}
</script>

Ищем энергичного, аккуратного и внимательного сотрудника поддержки. Знание систем uCoz или uKit будет огромным плюсом. Подробности
K1l0
Сообщений: 104
Репутация: 26

Сообщение # 5 | 20:30:27
Цитата 0RJ0 ()
<script>$(document).ready(function() {
$('#ID-тогочтохотим скрыть').css('display','none');
}
</script>
Ваш код работать не будет, а заодно "убьют" другие скрипты на странице.
Цитата 5elementov ()
У меня как раз для раскрытия элемента стоит CSS свойство
Это не совсем так. Вы используете эффект перехода между двумя состояниями элемента. Вместе с "hover" это работает отлично, и вы, наверно, просто откуда "дернули" эту спецификацию, и не прочитали описание.
Поставьте задержку в две секунды. НАпример:

Код
transition:all 1s linear 2s;
Где 1s это скорость анимации, linear тип анимации, а 2s задержка.
0RJ0
uWeb
Сообщений: 200
Репутация: 65

Сообщение # 6 | 21:05:06
K1l0, пытался найти что не так — забыл скобку. Бывает.

Код

<script>
$(document).ready(function() {   
setTimeout(function(){
$('#ID-тогочтохотим скрыть').css('display','none');   
},200);
});
</script>
Ну это максимум что можно было бы исправить. Чтобы отложить закрытие на две секунды.
Насчёт вашего решения не согласен — автору топика нужно чтобы изначально при загрузке страницы первые две секунды контент с акциями отображался. Потом через две секунды после загрузки страницы — он скрылся. Соответственно для этого нужно поменять свойство CSS через две секунды. При загрузке страницы display:block, например, а после загрузки (спустя две секунды) — display:none.
http://jsfiddle.net/Lqny5xsb/ — вот рабочий пример.

Ищем энергичного, аккуратного и внимательного сотрудника поддержки. Знание систем uCoz или uKit будет огромным плюсом. Подробности
K1l0
Сообщений: 104
Репутация: 26

Сообщение # 7 | 22:10:01
Цитата 0RJ0 ()
http://jsfiddle.net/Lqny5xsb/ — вот рабочий пример.
Там (в демо) Вы, видимо, забыли дописать функцию setTimeout. Я бы, все таки, юзал что-нибудь "покороче", чем возиться со стилями.

Код
$('.hello').remove();
Или

Код
$('.hello').hide();
Или, на худой конец

Код
$('.hello').slideUp();
Все вместе это выглядит:
Код
function hideHello() {
    $('.hello').hide();
}
setTimeout(hideHello, 2000)
Насчет CSS, так же можно сделать и с CSS. То что я описал, это задержка (delay). Можно использовать animate
https://jsfiddle.net/vmduavvp/3/
Это тоже работает. Ведь изначально стоял вопрос используя CSS
Сообщение отредактировал K1l0 - Пятница, 15 Май 2015, 22:10:47
Сообщество uCoz » Вебмастеру » Общие вопросы от вебмастеров » Как свернуть элемент на странице (с помощью CSS)
Страница 1 из 11
Поиск: