Я пытаюсь создать эффект, когда страница загружается, и через 5 секунд сообщение об успешном завершении на экране исчезает или скользит вверх.
Как я могу это достичь?
Я пытаюсь создать эффект, когда страница загружается, и через 5 секунд сообщение об успешном завершении на экране исчезает или скользит вверх.
Как я могу это достичь?
Встроенный javascript setTimeout.
setTimeout(
function()
{
//do something special
}, 5000);
UPDATE: вы хотите подождать, когда страница закончит загрузку, поэтому введите этот код внутри $(document).ready(...);
script.
ОБНОВЛЕНИЕ 2: jQuery 1.4.0 представил метод .delay
. Проверьте это. Обратите внимание, что .delay работает только с очередями эффектов jQuery.
Использовать обычный таймер javascript:
$(function(){
function show_popup(){
$("#message").slideUp();
};
window.setTimeout( show_popup, 5000 ); // 5 seconds
});
Ожидается 5 секунд после готовности DOM. Если вы хотите подождать, пока страница на самом деле loaded
, вам необходимо использовать это:
$(window).load(function(){
function show_popup(){
$("#message").slideUp();
};
window.setTimeout( show_popup, 5000 ); // 5 seconds
})
EDIT: В ответ на комментарий OP, спрашивающий, есть ли способ сделать это в jQuery и не использовать setTimeout
, ответ - нет. Но если вы хотите сделать его более "jQueryish", вы можете обернуть его вот так:
$.wait = function( callback, seconds){
return window.setTimeout( callback, seconds * 1000 );
}
Затем вы можете вызвать его следующим образом:
$.wait( function(){ $("#message").slideUp() }, 5);
Я столкнулся с этим вопросом, и я подумал, что дам обновление по этой теме. jQuery (v1.5 +) включает в себя модель Deferred
, которая (несмотря на то, что не придерживается Promises/A до jQuery 3) обычно рассматривается как более четкий способ подхода ко многим асинхронным проблемам. Реализация метода $.wait()
с использованием этого подхода особенно читаема, я полагаю:
$.wait = function(ms) {
var defer = $.Deferred();
setTimeout(function() { defer.resolve(); }, ms);
return defer;
};
И вот как вы можете его использовать:
$.wait(5000).then(disco);
Однако, если после паузы вы хотите выполнять действия только для одного выбора jQuery, тогда вы должны использовать jQuery native .delay()
который, я считаю, также использует Отложенные под капотом:
$(".my-element").delay(5000).fadeIn();
Использовали этот вариант для наложения сообщений, которые можно сразу закрыть при щелчке или автоклинировать через 10 секунд.
button = $('.status-button a', whatever);
if(button.hasClass('close')) {
button.delay(10000).queue(function() {
$(this).click().dequeue();
});
}
setTimeout(function(){
},5000);
Поместите свой код внутри { }
300 = 0.3 seconds
700 = 0.7 seconds
1000 = 1 second
2000= 2 seconds
2200 = 2.2 seconds
3500 = 3.5 seconds
10000 = 10 seconds
и т.д..
Библиотека поддеревьев также предоставляет функцию "delay":
_.delay(function(msg) { console.log(msg); }, 5000, 'Hello');
Основываясь на ответе Джо, я придумал предполагаемое (по jQuery, читаем о "очереди" ).
Это несколько следует за синтаксисом jQuery.animate() - позволяет привязываться к другим функциям fx, поддерживает "медленный" и другие jQuery.fx.speeds, а также полностью jQuery. И будет обрабатываться так же, как анимации, если вы их остановите.
jsFiddle тестовое поле с большим количеством применений (например, показ .stop()), можно найти здесь.
ядро решения:
$('<queue/>')
.delay(100 /*ms*/)
.queue( (next) => { $('#result').text('done.'); next(); } );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>
$( "#foo" ).slideUp( 300 ).delay( 5000 ).fadeIn( 400 );