如何使用切換（「幻燈片」）一次顯示一個字母的短語

我正在使用`.toggle（「幻燈片」）函數嘗試獲取一段文本，我必須像每個信件滑入。不幸的是，它看起來好像文本正在飛入。我試圖緊緊地擠壓邊緣，以便它可以從更近的地方開始，但它仍然看起來好像從左側飛入。如何使用切換（「幻燈片」）一次顯示一個字母的短語

有沒有更好的方法來做到這一點，所以它看起來好像字母滑入沒有「飛入」？

$("#home-learn").toggle("slide");

#blue { 
 
\t background-color: #0085A1; 
 
\t width: 100%; 
 
\t height: 300px; 
 
} 
 
#home-learn { 
 
\t color: #FFF; 
 
\t display: none; 
 
\t text-align: center; 
 
\t position: relative; 
 
\t margin: 0 40%; 
 
\t top: 50%; 
 
\t font-size: 2.3em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="blue"> 
 
    <div id="home-learn">Learn more...</div> 
 
</div>

來源

2016-01-23 Paul

你能具體談談不同的是**滑動**和**飛之間什麼** ？那現在怎麼樣了？它太快了嗎？你想讓每封信都一次一個滑動，而不是一起滑動？很難說出問題的原因是什麼 – DelightedD0D

我希望這封信一字不差地滑入頁面。不要讓這個詞來自頁面的左側，並且落在它的特定位置。 – Paul

Maybet對你更好，就像寫作效果http://www.jqueryscript.net/demo/jQuery-Plugin-For-Customizable-Terminal-Text-Effect-TypeIt/ – ZgrKARALAR

對於你想要的效果，把一個div您的容器內。使div位置爲絕對位置，使其100％爲容器的高度和寬度，並使其與主背景具有相同的背景色。使div的z索引高於容器，以便div像窗簾一樣位於文本之上。然後使用toggle（）將窗簾向右滑動，露出下面的文字。（至少據我所知，你不能），因爲它沒有它，你不能讓toggle()幻燈片向右滑動（至少據我所知你不能）。如果你不想使用jQuery UI的，你可以使用.animate()代替toggle()

$("#curtain-div").toggle("slide", { 
 
    direction: "right" 
 
    }, 3000);

#blue { 
 
    background-color: #0085A1; 
 
    position: relative; 
 
    width: 100%; 
 
    height: 300px; 
 
} 
 

 
#home-learn { 
 
    color: #FFF; 
 
    text-align: center; 
 
    position: relative; 
 
    top: 50%; 
 
    font-size: 2.3em; 
 
} 
 

 
#curtain-div { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    background-color: #0085A1; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 10; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 
<div id="blue"> 
 
    <div id="home-learn"> 
 
    <div id="curtain-div"></div> 
 
    Learn more... 
 
    </div> 
 
</div>

來源

2016-01-23 23:54:47 DelightedD0D

謝謝你爲我構建這個！它更適合我所尋找的東西，但它仍然不是它。基本上我正在尋找的是從左到右滑動的代碼。說'文本對齊：中心;'被設置，代碼出現的地方，我不希望單詞顯示在該區域之外。我想要淡出的起點，然後是其餘的。 – Paul

@Paul Im對不起，我似乎無法理解你的目光。你可以用不同的方式解釋嗎？ – DelightedD0D

好的。代碼（文本）用一張紙覆蓋。它仍然存在，現在，想象你把這張紙移到右邊。文本保持原位，所以它似乎不會「飛入」，並滑過。 – Paul

如何使用切換（「幻燈片」）一次顯示一個字母的短語

回答

相關問題