jquery滑动隐藏内容换行符

Question

我正在尝试这样做demo

编辑--- <罢工>这里是占位符的现状[问题演示] [2] ---编辑

出于某种原因，我的文本是换行符，然后在动画结束后跳转到内联。我不能使用简单的'div'，因为它会影响页面的其余部分，所以我不确定如何使这个东西正常工作。

我的代码完全按照演示中的显示减去div显示内联块css规则

div {
display : inline-block;
}
.holdingbox {
position: relative;
top: 0;
}
.leftbox {
position: relative;
top: 0;
left:0;
display:inline-block;
}
.rightbox {
position: relative;
display:inline-block;
overflow:hidden;
width:0;
height:30px;
vertical-align:top;
}
.content{
width:100px;
position:absolute;
left:0;
top:0;
}
.box {
margin-left : 5px;
}

html是

<div class="holdingbox">
 <span class="leftbox">Stuff</span>
 <span class="rightbox">
     <span class="content">Stuff to reveal</span>
 </span>
</div>
<div class = "box">Text</div>​

和js是

    $('.holdingbox').hover(function(){
    $('.rightbox').animate({width: '90px'}, 1000)
}, function(){
    $('.rightbox').animate({width: '0'}, 1000)
});

Answer 1

创建新的CSS规则

.inline_block { display : inline-block; }

并在需要的地方添加，例如

<div class="holdingbox inline_block">
 <span class="leftbox inline_block">Stuff</span>
  <span class="rightbox inline_block">
  <span class="content inline_block">Stuff to reveal</span>
 </span>
</div>
<div class = "box inline_block">Text</div>​

这不应该影响页面上的其他divs。