I'd like to know why setimout(fun(),time) is not working here:

Context: This shows a message and Hides it, i'd like to make it wait 2 seconds, but if i do as following it wont hide (normally i do it without the setimeout()

function mostrar_msj(msj){
  $('#notificaciones').text(msj);
  $('#notificaciones').animate({
          top:$(window).scrollTop()+"px"
      },
      {
          queue: false,
          duration: 350
  });  
  $("#notificaciones").slideDown(1000, setTimeout('cerrar()',2000));
}

function cerrar(){
  $("#notificaciones").fadeOut(2000);
}

I'm just confused, here :?

I'd like to know why setimout(fun(),time) is not working here:

Context: This shows a message and Hides it, i'd like to make it wait 2 seconds, but if i do as following it wont hide (normally i do it without the setimeout()

function mostrar_msj(msj){
  $('#notificaciones').text(msj);
  $('#notificaciones').animate({
          top:$(window).scrollTop()+"px"
      },
      {
          queue: false,
          duration: 350
  });  
  $("#notificaciones").slideDown(1000, setTimeout('cerrar()',2000));
}

function cerrar(){
  $("#notificaciones").fadeOut(2000);
}

I'm just confused, here :?

• javascript
• jquery
• settimeout

• This isn't an answer to your question, but you are probably better off using jQuery's delay in this case. – Fareesh Vijayarangam Commented Mar 23, 2011 at 21:28
• What are you trying to achieve? If you want the #notificaciones to fadeOut after they plete the slideDown, just use an anonymous function as the callback for slideDown. – Matijs Commented Mar 23, 2011 at 21:28

7 Answers 7

As you are using jQuery, easier is to use delay():

$("#notificaciones").slideDown(1000).delay(2000).fadeOut(2000);

Animation functions are automatically queued.

But to answer your actual question:

1. You are not setting the callback correctly. This

   $("#notificaciones").slideDown(1000, setTimeout('cerrar()',2000));
   

   will set the return value of setTimeout as callback for slideDown. A proper callback would be

   $("#notificaciones").slideDown(1000, function() {
       setTimeout('cerrar()',2000);
   });
   

   But this does not explain why the cerrar is not called as obviously setTimout is called. This brings us to the second point:

2. If you pass a string to setTimeout, then it is evaluated in global scope. If you have this piece of code inside the ready handler, then cerrar is not in global scope and thus not found by JavaScript.

   For this reason, passing strings is discouraged. You should pass a function reference instead:

   setTimeout(cerrar, 2000);
   

It doesn't work because you didn't understand how to use callbacks. Here's the proper code:

function mostrar_msj(msj) {
    $('#notificaciones').text(msj);

    $('#notificaciones').animate({
        top: $(window).scrollTop() + "px"
    }, {
        queue: false,
        duration: 350
    });
    $("#notificaciones").slideDown(1000, function() {
        setTimeout(function() {
            $("#notificaciones").fadeOut(2000);
        }, 2000)
    });
}

Try this:

$("#notificaciones").slideDown(1000, function() { setTimeout('cerrar()',2000) });

You're referencing a function call when you should just reference the function:

...setTimeout(cerrar,2000)

Try passing cerrar as function pointer:

setTimeout(cerrar, 2000)

see: JQuery, setTimeout not working

I highly remend not using setTimeout() if you are already using jQuery. Here is another way you could acplish the same goal in a cleaner more jQuery-like fashion:

function mostrar_msj(msj){
        $('#notificaciones').text(msj);
        $('#notificaciones').animate({top:$(window).scrollTop()+"px" },{queue: false, duration: 350});  
        $("#notificaciones").slideDown(1000).delay(2000).fadeOut(2000);
}

The delay function takes the number of MS for the timeout as its argument, and will continue executing the queued/chained jQuery operations after the timeout.

You should be able to do it this way, using the delay method

function mostrar_msj(msj){
    $('#notificaciones')
        .text(msj)
        .animate({top:$(window).scrollTop()+"px" },{queue: false, duration: 350})  
        .slideDown(1000)
        .delay(2000)
        .fadeOut(2000);
}