HOE WAIST 5 SECONDEN MET JQUERY?

Ik probeer een effect te creëren waarbij de pagina laadt, en na 5 seconden vervaagt het succesbericht op het scherm of schuift u omhoog.

Hoe kan ik dit bereiken?

1, Autoriteit 100%

Gebouwd in JavaScript SetTimeout .

setTimeout(
  function() 
  {
    //do something special
  }, 5000);

Update : u wilt wachten sinds de pagina is voltooid, dus zet die code in uw $(document).ready(...);script .

Update 2 : jQuery 1.4.0 Introductie van de .delay-methode. Bekijk het . Merk op dat .delay alleen werkt met de jQuery-effectswachtrijen.

2, Autoriteit 8%

Gebruik een normale JavaScript-timer:

$(function(){
   function show_popup(){
      $("#message").slideUp();
   };
   window.setTimeout( show_popup, 5000 ); // 5 seconds
});

Hierdoor wacht 5 seconden nadat de DOM klaar is. Als u wilt wachten tot de pagina eigenlijk loadedmoet u dit gebruiken:

$(window).load(function(){
   function show_popup(){
      $("#message").slideUp();
   };
   window.setTimeout( show_popup, 5000 ); // 5 seconds
})

EDIT: In antwoord op de opmerking van de op de opmerking van de OP als er een manier is om het in jQuery te doen en niet te gebruiken setTimeoutHet antwoord is nee. Maar als je het meer “jQueryish” wilde maken, zou je het als volgt kunnen wikkelen:

$.wait = function( callback, seconds){
   return window.setTimeout( callback, seconds * 1000 );
}

Je zou het dan zo kunnen noemen:

$.wait( function(){ $("#message").slideUp() }, 5);

Antwoord 3, autoriteit 6%

Ik kwam deze vraag tegen en ik dacht ik geef een update over dit onderwerp. jQuery (v1.5+) bevat een Deferred-model , die (ondanks het zich niet houden aan de Promises/A-specificatie tot jQuery 3 )wordt algemeen beschouwd als een duidelijkere manier om veel asynchrone problemen aan te pakken. Het implementeren van een $.wait()-methode met behulp van deze aanpak is volgens mij bijzonder leesbaar:

$.wait = function(ms) {
    var defer = $.Deferred();
    setTimeout(function() { defer.resolve(); }, ms);
    return defer;
};

En zo kun je het gebruiken:

$.wait(5000).then(disco);

Als u echter na het pauzeren alleen acties wilt uitvoeren op een enkele jQuery-selectie, zoude native .delay()die volgens mij ook Deferred’s onder de motorkap gebruikt:

$(".my-element").delay(5000).fadeIn();

Antwoord 4, autoriteit 4%

setTimeout(function(){
},5000); 

Plaats uw code in de { }

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

enz.

5, Autoriteit 3%

Gebruik deze voor een bericht overlay die onmiddellijk op klik kan worden gesloten of het doet een autoclose na 10 seconden.

button = $('.status-button a', whatever);
if(button.hasClass('close')) {
  button.delay(10000).queue(function() {
    $(this).click().dequeue();
  });
}

6

De underscore-bibliotheek biedt ook een “vertraging” -functie:

_.delay(function(msg) { console.log(msg); }, 5000, 'Hello');

7

Gebaseerd op het antwoord van Joey, kwam ik met een beoogde (door jQuery, lees over ‘wachtrij’).

Het is enigszins volgt de jQuQuery.animate () Syntaxis – maakt het mogelijk om met andere FX-functies te worden geketend, ondersteunt ‘langzaam’ en andere jQuery.fx.Speeds en volledig jQuery. En zal op dezelfde manier worden behandeld als animaties, als u die stopt.

jsFiddle proefbank meer gebruiksmogelijkheden (zoals blijkt uit .Stop ()), is beschikbaar hier .

De kern van de oplossing is:

$('<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 );