fadeOutしたい要素自体をクリックすることでアクションさせる方法

Question

現在jQueryの勉強を行っており、画面にオーバーレイをかけるためにfadeIn、fadeOutの動作を確認しているのですが、「fadeOutしたい要素をクリックすることでfadeOutさせる」ことはできないのでしょうか？

下記のソースの下部が質問の部分です。

$(function() {
    $('#openOverlay').click(function(){
        $('#overlay').fadeIn();
    }); 
    $('#overlay').click(function(){
        $('#overlay').fadeOut();
    })
})

コードを実行してもエラーが起きるため、できないのだと思っていますが、もしできる場合はどういう書き方をすればいいのか教えてもらえると助かります。

Comments

[kei344]

「エラーが起きるため」では無く、エラー文を具体的にコードブロックで質問文に追記ください。

Answer 1

普通に動くと思います

<script>
$(function() {
    $('#openOverlay').click(function(){
        $('#overlay').fadeIn();
    }); 
    $('#overlay').click(function(){
        $('#overlay').fadeOut();
    })
})
</script>
<input type="button" id="openOverlay" value="openOverlay">
<div id="overlay" style="display:none">overlay</div>