on hover slide panel from right and mouseout slide back

Question

Hi guys i have tried what you had given to me.. but what wrong am i doing see my fiddle

http://jsfiddle.net/cancerian73/Ej5k8/

 body {

position: relative;
min-height: 3000px;
margin: 0;
padding: 0;
top: 0;
font-family:'proximanova-regular', sans-serif;
 }

when you hover over the right top button the silde keep flickering and not like the example i want on http://yahoo.tumblr.com/

Answer 1

Why not do it in pure CSS?

* { margin: 0; }

#panel {
  position: fixed;
  background: #444;
  color: #fff;
  height: 100%;
  width: 300px;
  right: -300px;
          transition: right 0.4s ease-in-out;
  -webkit-transition: right 0.4s ease-in-out;
}
#panel:hover {
  right: 0px;
}

#panelCaller {
  position: absolute;
  top: 50px;
  right: 300px;        /* same as #panel width */
  background: #444;
}

<div id="panel">

  <div id="panelCaller">OPTIONS</div>

  <h2>Panel</h2>
  <p>Content...</p>
  
</div>

Otherwise in jQuery: http://jsfiddle.net/vVSJz/156/

var $pCont = $("#panel-content");
$pCont.width(0);
$("#panel").hover(function(ev){
    $pCont.stop().animate({width: ev.type=="mouseenter" ? 500 : 0}, 700);
});