jquery - 从左向右滑动 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>

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