从右侧悬停滑动面板,鼠标滑动向后滑动

Question

嗨,伙计们,我已经尝试过你给我的东西..但是我做错了什么看我的小提琴

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

 body {

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

当你将鼠标悬停在右上方的按钮上时,silde会一直闪烁,而不像我想要的例子 http://yahoo.tumblr.com/

Answer 1

为什么不在纯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>

否则在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);
});