打开和关闭固定div

Question

我在页面右侧有一个固定的div，如下所示：

这是我的html：

<a id="toggle" class="open"><img src="_styles/images/open_close.png" alt="openclose" /></a>
<div class="tweetdetails" style="width: 0px;">
  <p class="screenname">@BachelorGDM</p><br>
  <img src="linktoimage" alt="image_user"><br>
  <p class="createdon">Created on: Mar 8, 2013</p><br>
  <hr>
  <p class="text">Here is some text</p>
</div>

这是我的CSS：

.tweetdetails{
  color:white;
  padding:10px 50px;
  position: fixed;
  right:0px;
  width:300px;
  z-index: 999;
  background-color: #FFF;
  height:100%;
  background-color: black;
      border-left: 5px solid rgb(127,255,255);
}

.open{
    background-repeat: no-repeat;
    background-size: 50px auto;
    color:red;
    position: fixed;
    right:400px;
    top:50%;
}

在我的Javascript中，我有：

$("#toggle").click(function(){
    $(".tweetdetails").animate({width:'0px'}, 500);
    $("#toggle").animate({right: "-=300"}, 500);
})

但是我总是有这样的结果：

如何确定我什么都看不到了？ （我认为这与填充有关...）

Answer 1

检查小提琴是否懒惰；） http://jsfiddle.net/tbleckert/UERHX/

这是因为您的填充会使div的宽度变为300px，而不是300px。 您可以为div添加box-sizing并添加一些额外的宽度，如下所示：

.tweetdetails {
  box-sizing: border-box;
  width: 400px; // Since we added box-sizing
}

框大小将确保div保持您定义的宽度。 然后将切换开关的右边动画化为-400px。 请记住将供应商前缀添加到框大小（-moz和-webkit）中。

但！ 问题仍然存在，因此我建议为正确的属性设置动画而不是宽度。 那将起作用。

我建议您将#toggle放在.tweetdetails内，然后将其绝对定位在外面。 这样，您将仅需制作一个动画，因为#toggle将会随之而来。 您也可以仅通过添加类来使用CSS过渡来完成此操作。

.tweetdetails {
  right: -400px;
  transition: 0.5s right; // Add vendor prefixes
}

.tweetdetails.open {
  right: 0;
}

$('#toggle').click(function () {
  $('.tweetdetails').toggleClass('open');
});

我做了一个小提琴，向您展示我的意思： http : //jsfiddle.net/tbleckert/UERHX/

附带说明一下，您不应在CSS中使用ID，而应在JavaScript中使用ID。 将ID添加到您知道将在脚本中使用的元素是一种很好的做法（只是不要发疯，有时会应用多个元素，它们应该是类，以便可以轻松循环）。

Answer 2

您可以使其更加动态，而无需魔术数字：

 $(".tweetdetails").animate({width:'0px' , padding:'0px'}, 500);
 $("#toggle").animate({right: "-=" + ( $(".tweetdetails").outerWidth() ) }, 500);

.outerWidth是width+padding+border ，请看一下： http : .outerWidth
（编辑，感谢@tbleckert）

Answer 3

我想这就是您想要的： http : //jsfiddle.net/balintbako/XJbqD/

<a id="toggle" class="open"><img src="_styles/images/open_close.png" alt="openclose" /></a>

<div class="tweetdetails" style="width: 0px;">
    <p class="screenname">@BachelorGDM</p>
    <br/>
    <img src="linktoimage" alt="image_user"></img>
    <br/>
    <p class="createdon">Created on: Mar 8, 2013</p>
    <br/>
    <hr/>
    <p class="text">Here is some text</p>
</div>

CSS

.tweetdetails {
    color:white;
    position: fixed;
    right:0px;
    z-index: 999;
    background-color: #FFF;
    height:100%;
    background-color: black;
    border-left: 5px solid rgb(127, 255, 255);
}
.open {
    background-repeat: no-repeat;
    background-size: 50px auto;
    color:red;
    position: fixed;
    right:5px;
    top:50%;
}

JS

$("#toggle").click(function () {
    if ($("#toggle").hasClass("opened")) {
        $(".tweetdetails").animate({
            width: '0px',
            padding: '0px'
        }, 500);
        $("#toggle").animate({
            right: "-=" + 400
        }, 500);
    } else {
        $(".tweetdetails").animate({
            width: '300px',
            padding: '10px 50px'
        }, 500);
        $("#toggle").animate({
            right: "+=" + 400
        }, 500);
    }
    $("#toggle").toggleClass("opened");
});

Answer 4

    $(".tweetdetails").css('padding', '10px 0').animate({width:'0px'}, 500);