CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
Laptop Medico
Laptop Medico

Reputation: 32

jQuery event load at onFinish execution

On my project I have implemented a code that works on jQuery.

Here is the code:

<script>
            $("#startProgressTimer").click(function() {
                $("#progressTimer").progressTimer({
                    timeLimit: $("#restTime").val(),
                    onFinish: function(){
                    $('#startProgressTimer').fadeOut(2000);
                    $('#progressTimer').fadeOut(2000);

                    $('#testId').show();// NOT WORKING

                   }
                });
            });
</script>

I have a captcha that should be loaded when the onFinish event is executed. $('#startProgressTimer').fadeOut(2000); and $('#progressTimer').fadeOut(2000); is working properly. But $('#testId').show(); is not working. Here is the "testId" div element. <div id="testId" style="visibility:hidden"><?php include'cap_index.php'; ?></div>. This element should work when the onFinish event is executed IMMEDIATELY AFTER the first two elements fades out properly but its not working. The captcha does not appears. Please help.

Upvotes: 0

Views: 637

Answers (1)

taxicala
taxicala

Reputation: 21759

Jquery show won't work with elements hidden by visibility: hidden;, you could show it as follows:

$("#testId").css('visibility', 'visible');

Now, if you wan't #testId to show after the other two elements are hidden, use a callback function for the fadeOut call:

$('#startProgressTimer, #progressTimer').fadeOut(2000, function() {
    $("#testId").css('visibility', 'visible');
});

Upvotes: 3

Related Questions