html - 画像クリックで div を表示し、x 秒後に非表示にする

Question

画像がクリックされたときに div を表示し、指定された秒数後に非表示にしようとしています。ニーズに合った 2 つの個別のコード サンプルを見つけましたが、それらを組み合わせる知識がありません。

x 秒後にコンテンツを非表示にするコード:

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

imageclick で div を表示するコード:

<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>

Answer 1

多分これが役立つかもしれません：

$('#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
});

これが実際のサンプルです: http://jsfiddle.net/7X767/3/

Answer 2

「slow」を使用する代わりに、ミリ秒単位の時間値を使用できます。