0

私はこの デモをしようとしています

編集--- プレースホルダーの現在の状況[問題のデモ] [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)
});
4

1 に答える 1

0

新しい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これは、ページ上の他の人には影響しません。

于 2012-11-16T20:16:37.983 に答える