对 lettering.js 插件使用 jQuery animate()

Question

在其 documentation 上操纵每个提到的字母使用 CSS 并且我正在尝试使用 jQuery animate() 功能定位特定字母不幸的是没有看不出我在期待什么。在这种情况下可以使用 jQuery 吗？

默认script

<h1 class="fancy_title">AWESOME</h1>

 <script>
     $(document).ready(function(){
        $(".fancy_title").lettering();
     });
</script>

我正在尝试...

$(document).ready(function(){
    $('.char1').hide(1000).show(1000)
    .animate({left: '400', opacity: 0.5}, 3000)
    .animate({left: '-400', opacity: 1}, 300); 
});

Answer 1

像这样将所有 JS 代码放入文档中：

$(document).ready(function(){
    $(".fancy_title").lettering();
    $('.char1').hide(1000).show(1000)
    .animate({left: '400', opacity: 0.5}, 3000)
    .animate({left: '-400', opacity: 1}, 300); 
});

删除此部分：

<script>
     $(document).ready(function(){
        $(".fancy_title").lettering();
     });
</script>

Jsfiddle

检查您是否在 html

中包含脚本 "lettering.js"

对 lettering.js 插件使用 jQuery animate()

using jQuery animate() for lettering.js plugin

jquery

jquery-plugins