jquery - jquery滑动隐藏内容换行

Question

我正在尝试做这个 演示

编辑 --- 这是占位符的当前情况 [问题演示] [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页面上的其他内容。