CODEWITHSUNDEEP
javascriptjquery
HMdeveloper
HMdeveloper

Reputation: 2884

animation does not disappear

I have a scenario like this: when you click another div would come up and show waiting animation and it works properly but when I want it disappear it does not work here is my code:

$(document).ready(function () {


$('#t').hide();
$("#clickme").click(function () {
    $("#t").fadeIn(4000, function () {
        // Animation complete
        $("#t").show();
    });
});
setTimeout(

}, 5000);
$("#t").fadeOut(4000, function () { 
    $("#t").hide();
 });
});

and fiddle link is as follow: http://jsfiddle.net/hminaee/qF8dX/1/

can anyone help?

Upvotes: 0

Views: 44

Answers (2)

Felix
Felix

Reputation: 38112

You can use delay() here instead:

$(document).ready(function () {
    $('#t').hide();
    $("#clickme").click(function () {
        $("#t").fadeIn(4000, function () {
            $("#t").show().delay(4000).fadeOut(1000);
        });
    });
});

So basically, after showing your waiting animation, it'll delay 4 seconds then fade out your waiting animation in 1 second.

Fiddle Demo

Based on your comment, you can add pointer-events: none to your modal to allow click event go through the modal:

.modal {
    pointer-events: none; 
}

Updated Fiddle

Upvotes: 1

Tomanow
Tomanow

Reputation: 7377

This closely ties to your original code: Fiddle

$(document).ready(function () {
    $('#t').hide();
    $("#clickme").click(function () {
        $("#t").fadeIn(4000, function () {
            // Animation complete
        }).promise().done(function () {;
            $("#t").fadeOut(4000, function () {
                // Animation complete
                $("#t").hide();
            });
        });
    });
});

Upvotes: 1

Related Questions