我的页面右侧有一个固定的 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);
})
但我总是得到这样的结果:
我怎样才能确保我再也看不到任何东西了? (我认为这与填充有关...)
最佳答案
如果你很懒,请检查 fiddle ;) http://jsfiddle.net/tbleckert/UERHX/
这是因为您的内边距将使 div 宽度变为 400 像素,而不是 300 像素。您可以向 div 添加框大小并添加一些额外的宽度,如下所示:
.tweetdetails {
box-sizing: border-box;
width: 400px; // Since we added box-sizing
}
box-sizing 将确保 div 保持您定义的宽度。然后将右侧的切换动画设置为 -400px。请记住将 vendor 前缀添加到 box-sizing(-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');
});
我做了一个 fiddle 来向你展示我的意思:http://jsfiddle.net/tbleckert/UERHX/
顺便说一句,您不应该在 CSS 中使用 ID,但应该在 javascript 中使用它们。将 ID 添加到您知道将在脚本中使用的元素是一个很好的做法(只是不要疯狂,有时会应用多个元素,并且它们应该是类,以便可以轻松循环)。
关于javascript - 打开和关闭固定div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17186394/