Efeitos de tempo limite do jQuery

101

Estou tentando fazer com que um elemento apareça gradualmente e, em seguida, em 5000 ms volte a desaparecer. Eu sei que posso fazer algo como:

setTimeout(function () { $(".notice").fadeOut(); }, 5000);

Mas isso só controlará o fade out. Eu adicionaria o acima no retorno de chamada?

jquery timeout Coughlin
fonte

Respostas:

197

Atualização: A partir do jQuery 1.4, você pode usar o .delay( n )método. http://api.jquery.com/delay/

$('.notice').fadeIn().delay(2000).fadeOut('slow');

Observação : $.show()e $.hide()por padrão não estão na fila, então se você quiser usar $.delay()com eles, você precisa configurá-los desta forma:

$('.notice')
    .show({duration: 0, queue: true})
    .delay(2000)
    .hide({duration: 0, queue: true});

Você poderia usar a sintaxe da fila, isso pode funcionar: 

jQuery(function($){ 

var e = $('.notice'); 
e.fadeIn(); 
e.queue(function(){ 
  setTimeout(function(){ 
    e.dequeue(); 
  }, 2000 ); 
}); 
e.fadeOut('fast'); 

});

ou você poderia ser realmente engenhoso e fazer uma função jQuery para fazer isso.

(function($){ 

  jQuery.fn.idle = function(time)
  { 
      var o = $(this); 
      o.queue(function()
      { 
         setTimeout(function()
         { 
            o.dequeue(); 
         }, time);
      });
  };
})(jQuery);

que (em teoria, trabalhando na memória aqui) permitiria que você fizesse isso: 

$('.notice').fadeIn().idle(2000).fadeOut('slow');
Kent Fredric
fonte
1
Estou me perguntando por que você está usando a fila quando um simples uso de setTimeout também funcionará.
SolutionYogi
33
porque se você usar a fila, é fácil adicionar novos eventos e reutilizar o código, e a reutilização de código é um GoodThing ™
Kent Fredric
2
Observe que, como também afirmado na documentação da API jQuery, delay () deve realmente ser usado apenas para coisas relacionadas à fila de efeitos. Se você precisar de um tempo limite para outra coisa, setTimeout () ainda é o caminho a percorrer.
scy de
Uau, obrigado pelo link @bottlenecked, acho que a razão do meu exemplo ser tão semelhante ao novo recurso adicionado ao jQuery é que há uma notável cadeia de influência dessa resposta para bugs.jquery.com/ticket/4102 = P
Kent Fredric,
23

Eu só descobri abaixo:

$(".notice")
   .fadeIn( function() 
   {
      setTimeout( function()
      {
         $(".notice").fadeOut("fast");
      }, 2000);
   });

Vou manter a postagem para outros usuários!

Coughlin
fonte
14

Excelente hack de @strager. Implemente-o no jQuery assim:

jQuery.fn.wait = function (MiliSeconds) {
    $(this).animate({ opacity: '+=0' }, MiliSeconds);
    return this;
}

E então use-o como:

$('.notice').fadeIn().wait(2000).fadeOut('slow');
Arash Milani
fonte
11

Você pode fazer algo assim:

$('.notice')
    .fadeIn()
    .animate({opacity: '+=0'}, 2000)   // Does nothing for 2000ms
    .fadeOut('fast');

Infelizmente, você não pode simplesmente fazer .animado ({}, 2000) - acho que isso é um bug e irei relatá-lo.

strager
fonte
5

Para poder usar assim, você precisa voltar this. Sem o retorno, fadeOut ('lento'), não obterá um objeto para executar essa operação.

Ie:

  $.fn.idle = function(time)
  {
      var o = $(this);
      o.queue(function()
      {
         setTimeout(function()
         {
            o.dequeue();
         }, time);
      });
      return this;              //****
  }

Então faça isto:

$('.notice').fadeIn().idle(2000).fadeOut('slow');
user128026
fonte
1

Isso pode ser feito com apenas algumas linhas de jQuery:

$(function(){
    // make sure img is hidden - fade in
    $('img').hide().fadeIn(2000);

    // after 5 second timeout - fade out
    setTimeout(function(){$('img').fadeOut(2000);}, 5000);
});​

veja o violino abaixo para um exemplo funcional ...

http://jsfiddle.net/eNxuJ/78/

DaveAlger
fonte