Jquery delay() and fadeOut()

Question

I've been stuck to one little problem, I want to fadeIn specific block when I'm clicking on other block, then wait for 2.5 sec and fade specific block out. Here is the code I have so far:

$('button.other-block').click(function () {
    $(this)
    .find('.specific-block')
    .fadeIn()
    .delay(2500).queue(function() {$(this).fadeOut(1600, complete)});
});

fadeIn just goes fine and delay function runs fine too. But fadeOut seems to be not working (it doesn't matter if I will change it to .fadeOut(1600) or just .fadeOut() ) Where is the problem could be?

Here is the full code, since there is much more simplified version above.

HTML:

<div class="account-edit-group">    
                    <input type="text" value="" class="account-edit-field">
                    <div>
                        <button class="account-edit-field-save"> </button><button class="account-edit-field-cancel"> </button>
                    </div>  
                    <div class="account-edit-field-warning"><span class="w-text">Error! You can enter no more than 30 symbols</span></div>
        </div>

JS:

$('button.account-edit-field-save').click(function () {
      var checklength = $(this).parent().parent().find('input.account-edit-field');  
        if(checklength.val().length > 30)
        {
        $(this)
        .parent()
        .parent()
        .find('.account-edit-field-warning')
        .fadeIn()
        .delay(2500).queue(function() {
        $(this).fadeOut(1600, complete).dequeue(); 
        });     
        }
        if(checklength.val().length <= 30)
        {
        $(this)
        .parent()
        .parent()
        .removeClass('acc-edit-f')
        }
      });

So JS is checking which button was clicked, and if button-save was clicked - it checks value of the field above. If there is more than 30 symbols - it will show the error message. Which I need to fadeIn first, show for a little, and then fadeOut. That's the problem, it won't fade out and I don't know why.

Answer 1

You can wait for the fade in to finish first by passing in a callback like this:

$('element').fadeIn(function () {
   // Fade in complete
});

When the fade in is complete, you can continue with the delay and fade out.

$('button.other-block').click(function () {
   $(this)
     .find('.specific-block')
     .fadeIn(function () {
        $(this).delay(2500).fadeOut(1600, complete);
     });
});

If it doesn't work then switch over to Mootools ;)

EDIT: working example http://jsfiddle.net/tbleckert/RcL5y/

Answer 2

Just do:

$('button.other-block').click(function () {
    $(this)
    .find('.specific-block')
    .fadeIn()
    .delay(2500).fadeOut(1600, complete);
});

Answer 3

Try to use .dequeue() here:

$('button.other-block').click(function () {
    $(this)
    .find('.specific-block')
    .fadeIn()
    .delay(2500).queue(function() {
        $(this).fadeOut(1600, complete).dequeue(); 
    });
});

Answer 4

You can try the callback function in .fadeIn():

$(this).closest('.account-edit-group').find('.account-edit-field-warning')
       .fadeIn('normal', function(){
          $(this).delay(2500).fadeOut();
       });  

Although this should work:

 $(this).closest('.account-edit-group')
        .find('.account-edit-field-warning')
        .fadeIn()
        .delay(2500)
        .fadeOut();