添加蒙版到切换菜单

Question

我正在尝试为切换菜单添加遮罩。我们的想法是，当您单击#toggle按钮时，菜单将向下滑动并将遮罩应用于内容区域。

到目前为止，JS和html / php代码是：

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

有没有JS专家可以帮助学习者？