javascript - 我正在尝试在 WordPress.org 网站上使用 Textillate。我无法让它工作

Question

也许你可以帮助我。我有一个 wordpress.org 博客，我正在尝试使用这里的 Textillate 动画:http://jschr.github.io/textillate/ 。我下载了所有文件并将它们放到我的服务器上，按照说明进行操作，并按照说明页面上的说明添加了 header 元素和多个无序列表元素。我将文件添加到网页的头部部分，包括 animate、fittest、textilliate、lettering 和 jquery。我无法让它正常工作。

我去了 JS Fiddle，将我所有的 HTML、CSS 和 JavaScript 信息放在他们的网站上，然后我就在该网站上运行了。但是当我将完全相同的内容复制到我自己的网站中时，它不会执行动画。现在，我只是想让动画淡入和淡出三个不同的列表项，但它所做的只是一次将它们全部显示出来。

JS Fiddle 的代码可以在这里找到:http://jsfiddle.net/amandamays/Rvu9N/69/

<div class="black-bar">

     <h2 class="tlt">
        <ul class="texts">
            <li>Stressed out?</li>   
            <li>Deadlines looming?</li>
            <li>Writer's block?</li>
        </ul>
    </h2>
</div>

h2.tlt {
    color: #59bce3;
}

.black-bar {
    color: rgb(255, 255, 255);
    background-color: rgb(68, 68, 68);
    border: .133em solid rgb(68, 68, 68);
    border-radius: .333em;
    max-width: 100%;
    padding: .3em .5em;
    margin-top: .5em;
    margin-bottom: .5em;
    text-align: center;
}

ul {
    list-style: none;   
}

$('.tlt').textillate({ in : {
        effect: 'fadeIn'
    },
    out: {
        effect: 'fadeOut',
        sync: true
    },
    loop: true
});

有什么建议吗？

阿曼达·梅斯

Answer 1

你能修复这个问题吗，使用并下载wordpress插件 wp-textillate 。

在管理后端转到左侧的 WP Textillate，然后添加所有文本和动画。在它之后，您可以使用短代码或使用小部件将其介绍内容吗？

希望对你有帮助。