2010-09-09 1 views
1

все мне нужно, некоторые на стороне клиента код JQuery или JS, которые изменят стиль дивы после Х секундприуроченная дисплей DIV

как visibility : hidden; ИЛИ max-height : 50px;

или коммутатор класса \ идентификатор DIV (предпочтительным) раствор

ответ

5

Использование setTimeout

setTimeout(function(){ 
    // Change the style here... If using jQuery, it turns 
    $('#my_divs').css({'visibility':'hidden', 'max-height':'50px'}) 
    // or 
    $('#my_divs').addClass('my-custom-class'); 
}, x_seconds); 
+0

Не нужны кавычки вокруг имен свойств. –

+0

Выполнение, если оно содержит специальные символы, такие как «max-height». Dunno, я склонен ставить их, ссылаясь на атрибуты css, но это просто личное предпочтение. – Chubas

+0

@gradbot: Нет, вы не в этом случае. Имена свойств рассматриваются только как строки, они никогда не рассматриваются как переменные. – casablanca

4

Обычная JavaScript:

setTimeout(function() { 
    document.getElementById('your_div_id').className = 'new_class_name'; 
}, X * 1000); // X = number of seconds 
+0

это также удалит другие классы, вы должны добавить «className» – RobertPitt

+0

Правда, но я не был уверен, чего хочет OP, он просто сказал «переключить класс». – casablanca

2
$(document).ready(function(){ 
    setTimeout('changeStyle()', 1000); //milliseconds 
}); 

function changeStyle() { 
    //do something useful 
} 
+4

Вместо этого используйте 'setTimeout (changeStyle, 1000)'. –

+0

оставит страницу интерактивной для периода ожидания или нет .. и, пожалуйста, сообщите, как указать CSS – Moon

+0

Да, страница будет по-прежнему интерактивной –

0

Если и хотите показать время после того, как снова и снова какой-то секунды затем использовать

setIntervel('changeStyle()',1000); 

и и просто хочу время использовать только один раз, а затем использовать

setTimeout('changeStyle()',1000); 
function changeStyle() { 
// code to display time 
} 
1

Вот один из методов, который я использую на текущем веб-сайте.

$("#divStampWrapper").delay(1500).fadeIn("fast").delay(2500).animate({ top: -250 }, 2500).delay(2500).fadeOut("slow"); 

Пояснение: В основном это захватывает DIV, который удерживает изображение, ждет 1,5 секунды, а затем начинает выцветания его для просмотра. Как только эффект исчезновения закончен, он ждет еще 2,5 секунды и начинает перемещать его вверх в новое верхнее положение. Затем он ждет еще 2,5 секунды и начинает исчезать. Я знаю, что это немного больше, чем вы просили, но это хороший пример того, что можно сделать с помощью таймера.