Скрыть / показать Div после нескольких секунд

Question

Скрыть / показать Div после нескольких секунд

0

У меня есть Div. Я хотел бы скрыть его через 10 секунд, а затем показать его через 30 секунд, затем скрыть его снова через 10 секунд и так далее.

У меня есть этот код, но он не работает так, как я себе это представлял.

setTimeout(function() { 
    $("#myDiv").hide(); 
    setTimeout(function() {     
            $("#myDiv").show(); 
    },30000);
},10000);

Любой совет?

user3360031 20 март 2014, в 10:28

Источник

0

Вы проверили идентификатор вашего div?
luc 20 март 2014, в 09:13
0

Вы должны прочитать это: stackoverflow.com/questions/729921/settimeout-or-setinterval
Alberto 20 март 2014, в 09:15
0

Ниже я добавил для вас альтернативный ответ, который выглядит довольно круто (использует библиотеку timing ), поэтому ваш код становится: $("#myDiv").repeat().wait(10000).show().wait(30000).hide(); который я считаю гораздо более читабельным. Рекомендую посмотреть на эту библиотеку :)
Gone Coding 20 март 2014, в 09:46

Показать ещё 1 комментарий

Теги:

jquery

settimeout

4 ответа

1

Используйте setInterval как,

setInterval(function() { 
    $("#myDiv").hide(); 
    setTimeout(function() {     
        $("#myDiv").show(); 
    },10000);
},30000);

демонстрация

Вы можете установить время соответственно, как для своей проблемы, попробуйте,

setInterval(function() { 
    $("#myDiv").hide(); 
    setTimeout(function() {     
       $("#myDiv").show(); 
    },3000);
},4000);

Обновленная демоверсия

Rohan Kumar 20 март 2014, в 06:51

2

интервал будет вызываться каждые 10 секунд ... где для завершения цикла требуется 40 секунд
Arun P Johny 20 март 2014, в 09:15
1

Это не будет делать то, что вы ожидаете .... посмотрите на ваше время повторения!
Gone Coding 20 март 2014, в 09:15
0

Теперь сроки не соответствуют требованиям ... Спрячьте через 10 секунд (не 30). Это показывает через 10 секунд, а затем скрывается после 30.
Gone Coding 20 март 2014, в 09:20
0

Я добавил ответ, который включает в себя то, что вы намеревались сделать с setInterval (при условии, что начальное состояние показа было разрешено), а также лучшую альтернативу с использованием библиотеки timing .
Gone Coding 20 март 2014, в 09:52

Показать ещё 2 комментария

1

Вместо этого используйте setInterval (func, timeout), он будет запускать каждый тайм-аут в миллисекундах, а в func переключать div между видимыми и скрытыми

Banana 20 март 2014, в 06:29

0

Если вы не возражаете, чтобы начальное состояние было "показано", вы можете сделать это (что, вероятно, предполагал Рохан Кумар):

setInterval(function() { 
    $("#myDiv").show(); 
    setTimeout(function() {     
       $("#myDiv").hide(); 
    },10000);
},40000);

Таймер повтора устанавливается каждые 40 секунд (общий интервал 30 + 10), а скрытие происходит после фиксированного таймаута 10 секунд.

Существует также библиотека timing которая расширяет анимацию JQuery (чтобы разрешать повторы и т.д.):

http://creativecouple.github.com/jquery-timing/

Тогда ваш код станет чем-то вроде:

$("#myDiv").repeat().wait(10000).show().wait(30000).hide();

JSFiddle: http://jsfiddle.net/TrueBlueAussie/zDV6F/1/

Который я думаю довольно круто.

Если вы не возражаете против дополнительных звонков или не хотите получить дополнительную свободу, пойдите с ответом Аруна Пини.

Gone Coding 20 март 2014, в 06:51

Ещё вопросы

Вы проверили идентификатор вашего div?
Вы должны прочитать это: stackoverflow.com/questions/729921/settimeout-or-setinterval
Ниже я добавил для вас альтернативный ответ, который выглядит довольно круто (использует библиотеку timing ), поэтому ваш код становится: $("#myDiv").repeat().wait(10000).show().wait(30000).hide(); который я считаю гораздо более читабельным. Рекомендую посмотреть на эту библиотеку :)
интервал будет вызываться каждые 10 секунд ... где для завершения цикла требуется 40 секунд
Это не будет делать то, что вы ожидаете .... посмотрите на ваше время повторения!
Теперь сроки не соответствуют требованиям ... Спрячьте через 10 секунд (не 30). Это показывает через 10 секунд, а затем скрывается после 30.
Я добавил ответ, который включает в себя то, что вы намеревались сделать с setInterval (при условии, что начальное состояние показа было разрешено), а также лучшую альтернативу с использованием библиотеки timing .

Arun P Johny · Accepted Answer · 2014-03-20T07-04-00.000Z

Просто зациклируйте его, как

function toggleDiv() {
    setTimeout(function () {
        $("#myDiv").hide();
        setTimeout(function () {
            $("#myDiv").show();
            toggleDiv();
        }, 30000);
    }, 10000);
}
toggleDiv();

Демо: скрипка

Я видел твою скрипку, Арун, я сейчас изучаю Javascript, почему мы должны использовать toggleDiv(); когда это работает без вызова этой функции
@ user3004356: toggleDiv - это просто сам код. Это вызывает функцию рекурсивно. Если вы не вызываете его в этом примере, он будет запущен только один раз. Только setInterval вызывает функцию повторно.
@TrueBlueAussie Да, я попробовал в скрипке
идеальный! я не думал об использовании рекурсивной функции. Спасибо!