滑出标签飞回太远（离开页面）

Question

我在我的网站上实现了一个滑出式 div，它位于页面的左侧。可以单击一个小手柄，来回拉动标签。

Live example here

目前CSS，如下，设置为500px宽。我想要 250px 的宽度。

.panel {
  width:500px;
  min-height:175px;
  padding:40px;
  position:fixed;
  left:-580px;
  top:29.5%;
  z-index:1;
  background:#4d5290;
  -webkit-border-radius: 0px 0px 25px 0px;
border-radius: 0px 0px 25px 0px;
}

  .panel .trigger {
    width:36px;
    text-align:center;
    color:#fff;
    position:absolute;
    top:0;
    right:-36px;
  }

我将宽度减半为250px，然后假设我可以将left:-580px 的值减半以获得我想要的结果。

但是滑出标签向外滑动很好，但是当您再次单击手柄以隐藏标签时，它会从页面上飞回原来的 580px（这意味着您无法查看或取回它。）

我试图让它在 JS Fiddle 中工作，但我正在苦苦挣扎，因为 JS 文件在 js fiddle 中无法正常运行......正在处理它。同时，您可以在以下位置查看所需的一切：

The page/live site The JS linked file

希望有人可以帮助我弄清楚它在做什么。或者数字之间的差异的公式是什么？

Answer 1

.panel {
    width: 250px;
    min-height: 175px;
    padding: 40px;
    position: fixed;
    left: -330px; //you have 40px of padding, we need to add that to this calculation.
    top: 29.5%;
    z-index: 1;
    background: #4D5290;
    border-radius: 0px 0px 0px 25px;
}

jQuery 变化...

$(settings.objSlidePanel).animate({
    'left' : '-330px'
});

Your code live in action -- click here

编辑

你也很可能有标记问题，当我从你的网站复制它时，你的 img 标签呈现为<img src="blahblahblah.ext" <=" div=""/>。这可能会导致您在其他地方出现问题，可能与此代码无关。

还要检查您是否没有将 style="left:-580px" 硬编码到 <div> 中。