CODEWITHSUNDEEP
jquery
charlie
charlie

Reputation: 1384

JQuery second countdown and hide div

i am using the below JQuery code that fades a div out after 10 seconds:

var fade_out = function() {
  $("#notice_board_div").fadeOut().empty();
}
setTimeout(fade_out, 10000);

how can i also display a timer that counts down from 10 and when it gets to 0 it will run the above jquery code (hide the div)

i have this code:

$('#notice_board_textarea').on('blur', function () { // don't forget # to select by id
    var id = $(this).data('id'); // Get the id-data-attribute
    var val = $(this).val();
    $.ajax({
        type: "POST",
        url: "update_notice_board.php",
        data: {
            notes: val, // value of the textarea we are hooking the blur-event to
            itemId: id // Id of the item stored on the data-id
        },
        success: function (msg) {
            $('#' + id + '_div').html(msg); //Changes the textarea to the text sent by the server
        }
    });
});

which submits a form when the text area is click off of.

it displays a success message and then this code:

var fade_out = function() {
  $("#notice_board_div").fadeOut().empty();
}
setTimeout(fade_out, 10000);

which fades out the success message. How can i make the counter appear when the success message appears and then both the counter and success message fade out once the counter has reached 0 ?

Upvotes: 0

Views: 1953

Answers (1)

Neha
Neha

Reputation: 1548

Try this way .. Demo

var i =10;
var fade_out = function() {
$("#notice").fadeOut().empty();
clearInterval(counter);
};
setTimeout(fade_out, 10000);

function count() {  $("#counter").html(i--); }
var counter = setInterval(function(){ count(); },900);

new demo for updated que

Upvotes: 3

Related Questions