Προσπαθώ να δημιουργήσω ένα εφέ όπου η σελίδα φορτώνει και μετά από 5 δευτερόλεπτα, το μήνυμα επιτυχίας στην οθόνη σβήνει ή ανεβαίνει.
Πώς μπορώ να το πετύχω αυτό;
Ενσωματωμένο σε javascript setTimeout.
setTimeout(
function()
{
//do something special
}, 5000);
UPDATE: θέλετε να περιμένετε από τη στιγμή που η σελίδα έχει τελειώσει τη φόρτωση, οπότε βάλτε αυτόν τον κώδικα μέσα στο σενάριο $(document).ready(...);
.
ΠΡΟΗΓΗΣΗ 2: Το jquery 1.4.0 εισήγαγε τη μέθοδο .delay
. Ελέγξτε το. Σημειώστε ότι η .delay λειτουργεί μόνο με τις ουρές εφέ της jQuery.
Χρησιμοποιήστε ένα κανονικό χρονοδιακόπτη javascript:
$(function(){
function show_popup(){
$("#message").slideUp();
};
window.setTimeout( show_popup, 5000 ); // 5 seconds
});
Αυτό θα περιμένει 5 δευτερόλεπτα αφού το DOM είναι έτοιμο. Αν θέλετε να περιμένετε μέχρι η σελίδα να φορτωθεί
πραγματικά, πρέπει να χρησιμοποιήσετε αυτό:
$(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);
Η βιβλιοθήκη Underscore παρέχει επίσης μια λειτουργία "delay":
_.delay(function(msg) { console.log(msg); }, 5000, 'Hello');