jquery скользящий разрыв строки со скрытым содержимым

Я пытаюсь сделать это демо

РЕДАКТИРОВАТЬ --- вот текущая ситуация с заполнителями [демонстрация проблемы][2] --- РЕДАКТИРОВАТЬ

по какой-то причине мой текст разрывается на строку, а затем прыгает вверх после завершения анимации. Я не могу использовать простой «div», потому что он влияет на остальную часть страницы, поэтому я не знаю, как заставить эту штуку работать правильно.

мой код точно такой же, как показано в демонстрации, за исключением правила css встроенного блока отображения div.

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)
});

animation jquery css sliding
person user1070058    schedule 16.11.2012    source источник
comment
jsfiddle.net/mqzuD/27 хотите?   -  person Zoltan Toth    schedule 16.11.2012
comment
из того, что я могу сказать, они имеют тот же эффект - и они все еще, кажется, имеют тот же эффект, когда я помещаю их на свою страницу. Я загружу свой код, чтобы вы могли видеть, что происходит.   -  person user1070058    schedule 17.11.2012

Ответы (1)


arrow_upward
0
arrow_downward

Создайте новое правило 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 на странице.

person Boris    schedule 16.11.2012
comment
Хорошо, я разобрался, замени position: relative; внутри .leftbox {..} и .rightbox {} на float: left; - person Boris; 17.11.2012
comment
кажется, что теперь он анимируется в нужном месте (кроме хрома), но после завершения он падает. Он работает в firefox последовательно, но в сафари он работает только в том случае, если ширина .rightbox в js меньше ширины содержимого .rightbox - person user1070058; 17.11.2012
comment
Chrome не нравится display: inline-block; измените его на display: inline; это должно помочь. Не уверен насчет Safai, но вы можете установить некоторые padding, и это поможет вам. - person Boris; 17.11.2012
comment
это решило это - я пытался заполнить и т. д., но хитрость заключалась в правиле встроенного блока для .holdingbox, большое спасибо за вашу помощь. - person user1070058; 17.11.2012
comment
Добро пожаловать :) Рад, что помог. - person Boris; 17.11.2012