如何使用切换（“幻灯片”）一次显示一个字母的短语

我正在使用`.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

如何使用切换（“幻灯片”）一次显示一个字母的短语

回答

相关问题