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

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);
});

Answer 2

你可以使用jQuery悬停来实现这么简单的事情

DEMO http://jsfiddle.net/vVSJz/154/

$("#panel").hover(function(){
    $("#panel-content").animate({width: '600'}, 500);
  },function(){
  $("#panel-content").animate({width: '30'}, 500);
});

的 EDITED 的

要停止效果重复，请在最后一次通话后使用.stop()。

$("#panel").hover(function(){
        $("#panel-content").animate({width: '600'}, 500);
      },function(){
      $("#panel-content").animate({width: '30'}, 500);
      $("#panel-content").animate({width: '30'}, 500).stop();
    });

DEMO http://jsfiddle.net/vVSJz/158/

Answer 3

有几种方法，其中一种方法是使用jquery mouseleave，就像使用mouseenter一样。 因此，结合您的代码，您可以尝试以下方法，

http://jsfiddle.net/PrN9g/

$("#panel-tab").mouseenter(function (event) {
                $('#panel-content').stop(true,true);
                $("#panel-tab").stop(true);
                event.stopPropagation();
                showIfNotVisible("#panel-content");
            });
            $('#panel-content').mouseleave(function(){
                $("#panel-tab").stop(true,true);
                $('#panel-content').stop(true);
                                    hideIfNotHidden(this);                 

                                                     });

Answer 4

好的，编辑了我的答案并添加了动画，这很顺利。看一看。 我知道我做错了什么。

Fiddle

的 JS： 的

  $(function () {
        $("#panel-content").hide();

        $("#panel-tab").mouseenter(function () {
            $("#panel-content").show();
            $("#panel-content").animate({width:'300px'},'slow');
            $(this).addClass("hidden");
        });

     $("#panel-content").mouseleave(function() {
        $(this).animate({width: "1px"}, "slow", function()
        {
            $("#panel-tab").removeClass( "hidden" );
            $(this).hide();
        });
     });

    });

*的 CSS

  .hidden{
    display:none;
   }

简而言之，您忘记了mouseleave function。另外，我建议清理代码并删除不需要的不必要的东西。