jQuery fadeIn delay fadeOut with immediately fadeOut on button

Question

I want to fadeIn object then delay and fadeOut object and on click on button immediately fadeOut object. FadeIn delay fadeOut working, but second button for immediately fadeOut no.

Following code isn't working:

$('.btn1').click(function () {
    $('.obj1').fadeIn(100, function () {
        (this).delay(5000).fadeOut(100);
    });
});

$('.btn2').click(function () {
    $('.obj1').fadeOut(100);
});

Thank you for your help.

Answer 1

it is because of animation queue where you have a delay of 5000ms queued, you need to clear the queue before calling fadeOut() in button 2 click

$('.btn1').click(function () {
    $('.obj1').fadeIn(100, function () {
        $(this).delay(5000).fadeOut(100);
    });
});

$('.btn2').click(function () {
    $('.obj1').stop(true, true).fadeOut(100);
});

Demo: Fiddle