jquery中的滑动字母动画答案

【问题标题】：sliding letters animation in jqueryjquery中的滑动字母动画
【发布时间】：2017-04-10 10:19:54
【问题描述】：

我想为<h3> 设置动画以使其滑动，但我不希望在动画发生之前看到它（字母的滑动发生在 div 淡入之后）。这是动画的代码，尽管我认为它没有帮助

$(document).ready(function() {
    $("#div1").fadeIn(3000, function() {
        $("#div1 > h3").animate({ "left": "45.5%" }, 1500);
    });
    $("#div2").fadeIn(3000);
    $("#div3").fadeIn(1500);
});

这里是css代码：

 #div1 > h3 {
     text-align: justify; /* or whatever you want to */
     position:absolute;
 }
 #div1 {
     display: none;
 }
 #div2 {
     display: none;
 }
 #div3 {
     display: none;
 }

如果我让 h3 显示：无；他们不会出现。

【问题讨论】：

标签： jquery html css animation

【解决方案1】：

这是因为$(document).ready() 在应用 CSS 几毫秒后触发。您需要从一开始就将您的元素设置在正确的位置。尝试将 CSS 中的 #div1 > h3 设置为类似 left: -300px（如果它从左侧滑动）或类似 left: 120vh（如果它从右侧滑动）。

【讨论】：