CODEWITHSUNDEEP
htmlhideshowfadesmoothing
user1813739
user1813739

Reputation: 1

Show div on image click then hide it after x seconds

I'm trying to show a div when an image is clicked and then hide it after a given number of seconds. I've found two separate code samples that match my needs but I don't have the knowledge to put them together.

the code which makes content disappear after x seconds:

<script>
    window.setTimeout(function() {
        $('#fadeout').hide(2000);
    }, 4000);
</script>

The code which makes the div appear on imageclick:

<SCRIPT>
function fade(div_id, button) {

    if(button.value == 'FadeOut') {
        $('#'+div_id).fadeOut('slow');
        button.value = 'FadeIn';
    }
    else {
        $('#'+div_id).fadeIn('slow');
        button.value = 'FadeOut';
    }
}

$('#sometext').fadeOut(2);
</script>

Upvotes: 0

Views: 1563

Answers (2)

jec
jec

Reputation: 156

Maybe this could help:

$('#fadeout').hide(); // hide div
$('img').live('click', function(e){ 
    e.preventDefault(); //cancel default action of click
    $('#fadeout').show().delay(5000).fadeOut(1000); //show div on img click then hide after 5 seconds
});

here's a working sample: http://jsfiddle.net/7X767/3/

Upvotes: 2

Ofisora
Ofisora

Reputation: 2737

Instead of using 'slow', you can use time value in milliseconds.

Upvotes: 0

Related Questions