使用JS / jQuery在元素中逐个动画字母

Question

我想要实现的目标：

使用显示平面的包装器和包含任何文本的内部元素;

1. 计算中心;
   • 获取包装器的宽度
   • 获取分离前文本的宽度
   • （包装纸宽度/ 2） - 文字宽度=第一个字母将在哪里
2. 将文本分解为自己的div元素 - 我不需要，但对于任何想要使用任何答案的人，您可能希望替换  <的空格/ em>的
3. 将每个信件容器的位置设置在容器外面的右侧
4. 为每个字母元素边距设置动画并带有结束缓动效果;
   • 首先到中间位置
   • 所有跟随结束位置减去已移动字母的总宽度。
5. 等待几秒钟
6. 每个字母元素在左侧的平面之外都会有相同的延迟。
7. 的重复

在一个不太混乱的坚果壳

每个字母的启动时间稍微延迟到包装器的中心，保持在那里，然后离开视口。我个人这样做是为了加载动画。

我的尝试到目前为止：

<div class="LoadWrap">
    <div class="Loading">Loading</div>
</div>
<script type="text/javascript" src="Assets/JS/jquery-3.1.1.js"></script>
<script type="text/javascript" src="Assets/JS/jquery-ui-1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var Elem = $('.Loading'),
            EWid = Elem.width(),
            EStr = Elem.html(),
            ESLe = EStr.length,
            EOWi = Elem.parent().width(),
            ABCD = (EOWi - EWid) / 2,
            CTWi = 0;

        Elem.html("");

        for (var i = 0, len = ESLe; i < len; i++) {
          Elem.append("<div style=\"margin-left: " + EOWi + "px;\">" + EStr[i] + "</div>");
        }
        for (var i = 0, len = ESLe; i < len; i++) {
            var ThisWidth = $(".Loading > div:nth-of-type(i)").width();
            console.log(ThisWidth);
            //setTimeout(
            //  function() {
            //      $("#full-wrapper #full").animate({
            //          marginLeft: '-=938px'
            //      },{
            //          easing: 'easing',
            //          duration: 250,
            //      });
            //  }, 500);
        }

    });
</script>

我遇到的问题：

1. ＆＃39;：nth-​​of-type（number）＆＃39;似乎工作:nth-of-type(i)不会。

Answer 1

您需要连接数字

var ThisWidth = $(".Loading > div:nth-of-type(" + i + ")").width();