添加蒙版到切换菜单

Question

I am trying to add a mask to a toggle menu. The idea being that, when you click on the #toggle button, the menu will slide down and a mask is applied to the content area.

The JS and html / php code I have so far is:

(function($) {
$('#toggle').toggle( 
    function() {
        $('#popout').animate({ top: 0 }, 'slow', function() {
            $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />');
        });
    }, 
    function() {
        $('#popout').animate({ top: -600 }, 'slow', function() {
            $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />');
        });
    }
);
})(jQuery);

<div id="toggle"><i class="fa fa-bars"></i></div>
<div id="popout">
  <?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'menu_class' => 'nav-menu' ) ); ?>
</div>

Are there any JS pro's who can help out a learner?