Having Issue on Mouse Hover Between Two Element

Having Issue on Mouse Hover Between Two Element

Can you please take a look at This Demo and let me know how I can keep the #panel slide down/open when mouse traveling/hovering between #flip and #panel? and only slide up when mouse is out of theses two?

$(document).ready(function() { $("#flip").hover(function() { $("#panel").slideDown("slow"); }, function() {}); $("#panel").hover(function() { }, function() { $(this).slideUp("slow"); }); });
body { padding-top: 20px; } #panel, #flip { padding: 5px; text-align: center; background-color: #e5eecc; border: solid 1px #c3c3c3; } #panel { padding: 50px; display: none; }
<div id="flip">Click to slide the panel down or up</div> <div id="panel">Hello world!</div>