从左到右滑动div，但不是从页面的左侧滑动？

Question

我想从左到右滑动一些文字，但我需要它在页面中间。当我说中间时，这是因为它将从页面的左侧滑动。基本上当我悬停一个元素时，我需要它来显示它旁边的文本，但它必须滑入。

http://jsfiddle.net/do1wx8p8/

$("strong").on("mouseenter", function() {
    $("#nope").show("slide", { 
        direction: "left"
    }, 200);
}).on("mouseleave", function() {
    $("#nope").hide("slide", { 
        direction: "left"
    }, 200);
});

这很有效，但由于它是一个div，它会将其更改为display: block，这会强制它下一行。我该怎么办，让它在冒号后立即滑入？我基本上希望它从中滑入：

到此：

全部在一行。帮助赞赏！

Answer 1

您需要指定一些其他CSS属性才能实现此目的。我添加了以下内容：

#nope {
    display: none;
    position: relative;
     float: left;

}
#rolloverme {
    display: block;
     float: left;
}


<strong id="rolloverme">Text here: </strong>
<div id="nope" >Sliding text</div>

关键是让元素浮动。这使它脱离了常规的盒子模型定位。 https://jsfiddle.net/do1wx8p8/

Answer 2

将动态元素包装在另一个具有内联块显示属性的div中。

HTML：

<div class="text">
    <strong>Text here: </strong>
</div>
<div id="nope" class="text"><span>Sliding text</span></div>

CSS：

.text {
    display: inline-block;    
    float:left;
    margin-right: 10px;
}

看到这个小提琴（你的，但更新）

http://jsfiddle.net/5wy0gw8a/

祝你好运：）

Answer 3

这是一个类似的例子，只是过渡时间不同但你会明白它

<div class="holdingbox">
  <span class="leftbox">Slide text</span>
  <span class="rightbox">
   <span class="content">Slide text here</span>
  </span>
</div>

以下是css代码，其中存在一些缺陷，因为我对转换不太满意。

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

我从animate

的某个网站获得了jquery

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