CODEWITHSUNDEEP
jqueryhtml
Abdullah Salma
Abdullah Salma

Reputation: 570

how show and hide div with time and click option to hide included?

I have a div with display: none; I want to show it then hide it with in 5 seconds but if in the mean time a user click on the div it should disappear once it clicked. and seem I can't do both time to disappear and click option.

here the code.

$('#div').fadeIn();
$('#div').delay(5000).fadeOut();
$('#div').click(function(){
    $(this).fadeOut();
});

if I took out $('#div').delay(5000).fadeOut(); it won't disappear until I click.

if I took out $('#div').click(function(){ $(this).fadeOut(); }); It won't disappear when user click on it.

additional info

the thing is if I add this $('#div').delay(5000).fadeOut(); before or after the click code. the div will wait 5 sec and the div will be unclickable.

Upvotes: 1

Views: 89

Answers (1)

Rob Schmuecker
Rob Schmuecker

Reputation: 8954

This should do what you're looking for.

$('#div').fadeIn();
timerId = setTimeout(function(){
    $('#div').fadeOut();
}, 5000);
$('#div').click(function(){
    $(this).fadeOut();
    clearTimeout(timerId);
});

Upvotes: 3

Related Questions