title: Slide panel horizontal with jQuery and css3
body: <p>I would like make a slider panel which slide from right border screen to left. 
  I want the slide starts move when I "hover" the panel caller : tab. And when the panel moves, it pushes the tab with him. I have this code :</p>
  
  <p>html</p>
  
  <pre><code>&lt;div id="panel"&gt;
  &lt;div class="content"&gt;&lt;!-- Content --&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="tab"&gt;hit me for show panel&lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>#tab {
      width:50px;
      height:150px;
      position:fixed;
      right:0px;
      top:100px;
      display:block;
      cursor:pointer;
  }
  #panel {
          position:fixed;
      right:0px;
      top:50px;
      background-color:#999999;
      height:500px;
      width:0;
  }
  #panel .content {
      width:290px;
      margin-left:70px;
  }
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$(function() { 
          $('#tab').hover(function(event) {
          var panel = $('#panel');
          if (panel.hasClass('open')) {       //condition error
              panel.removeClass('open');
              $('.content').fadeOut('slow', function() {
                  $('#panel').stop().animate({
                      width: '0',
                      opacity: 0.0
                  }, 500)
              })
          } else {
              panel.addClass('open');
              $('#panel').stop().animate({
                  width: '400',
                  opacity: 1
              }, 500, function() { 
                  $('.content').fadeIn('slow'); 
              });
          }
      }); 
  });
  </code></pre>
  
  <p>The problem is when I leave the tab with the mouse cursor for "hover" panel, the panel disappears. And I want the panel stay open as long as I "hover" on both : tab AND panel. How I do that ?</p>