從左到右滑動div，但不是從頁面的左側滑動？

我想從左到右滑動一些文本，但我需要它在頁面中間。當我說中間時，這是因爲它會從頁面的左側滑動。基本上當我將鼠標懸停的元素，我需要它旁邊顯示文本，但它已在下滑。從左到右滑動div，但不是從頁面的左側滑動？

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

這工作完全，但因爲它是一個div，它會改變它到display: block，這強制它到下一行。我必須做些什麼才能讓它在冒號後立即滑入？我基本上希望它從這張幻燈片：

這樣：

所有一行。幫助讚賞！

來源

2015-10-27 MortenMoulder

CSS可以做到這一點HTTP：// JSF iddle.net/do1wx8p8/1/但首先，生成有效和連貫的HTML。那麼，當你使用jQuery函數，確保你明白什麼css規則暗示或編寫你自己的控制;） –

@Gyryrillus我很欣賞它，但看看文本是如何背後的文字。我已經知道如何去做，但是文本在文本背後滑動。我基本上需要它從結腸後的右側滑入，而不是在頁面的左側，如問題中所寫。如果「Text here：」放置在頁面中間，則會從左側飛入。看看我在哪裏？;） – MortenMoulder

哦，如果背景顏色有不同的顏色。小修復，但它更多的是解決方案:) – MortenMoulder

你需要指定一些其他的CSS屬性來實現這一目標的jQuery。我添加了以下內容：

#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/

來源

2015-10-27 23:41:51 Joel

哦，是的，這絕對是我正在尋找的。多謝，老兄！ – MortenMoulder

這是給你一個類似的例子，只是過渡時間是不同的，但你會得到它的想法

<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

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

來源

2015-10-27 23:37:25

這實際上比預期的效果更好。然而，寬度有點錯誤我。滑動內容（在您的案例中「滑動文本」）是動態的，我不知道它的寬度。 – MortenMoulder

只是將動態元素包裝在另一個具有內聯塊顯示屬性的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/

祝你好運:)

來源

2015-10-27 23:44:08 Himechi90

可能要更新該鏈接到正確的;） – MortenMoulder

LOL！謝謝！編輯:) – Himechi90

也可以。謝謝！ – MortenMoulder

從左到右滑動div，但不是從頁面的左側滑動？

回答

相關問題