在鼠标悬停滑动面板上从右侧和 mouseout 向后滑动答案

【问题标题】：on hover slide panel from right and mouseout slide back在鼠标悬停滑动面板上从右侧和 mouseout 向后滑动
【发布时间】：2013-12-25 17:02:47
【问题描述】：

大家好，我已经尝试过你给我的东西。但是我做错了什么看看我的小提琴

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/ 上的示例

【问题讨论】：

鼠标移出你想做什么？
这是我试图达到的效果yahoo.tumblr.com 将鼠标悬停在右上角的 tumblr 按钮上

标签： jquery html css panel slide

【解决方案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);
});

【讨论】：

【解决方案2】：

有几种方法，其中一种是使用 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);                 

                                                     });

【讨论】：

【解决方案3】：

你可以使用 jQuery hover 来做一些如此简单的事情

演示http://jsfiddle.net/vVSJz/154/

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

已编辑

在最后一次调用后使用.stop() 停止效果重复。

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

演示http://jsfiddle.net/vVSJz/158/

【讨论】：

如果我悬停并离开几次，它会长时间播放动画，例如。我知道你需要使用一个叫做 .stopPropagation 的东西如何使用它

【解决方案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。另外，我建议清理您的代码并删除不需要的不必要的东西。

【讨论】：