我正在尝试在WordPress.org网站上使用Textillate。 我无法正常工作

Question

Perhaps you can help me. I have a wordpress.org blog and I am trying to use Textillate animation from here: http://jschr.github.io/textillate/ . I downloaded all the files and put them onto my server, followed the instructions, and added a header element and multiple unordered list elements as it says on the instruction page. I added the files to the head section of my webpages including the animate, fittest, textilliate, lettering, and jquery. I cannot get it to work right.

I went to JS Fiddle and put all my information on their website for the HTML, CSS, and JavaScript and I got it working on that site. But when I copy the exact same thing over into my own website, it doesn't do the animation. Right now, I'm just trying to get the animation to fade in and out three different list items but all it does is show them all at once one.

The code at JS Fiddle can be found here: 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
});

Any suggestions?

Amanda Mays

Answer 1

Can you fix it, using and download the wordpress plugin wp-textillate .

On admin backend go to WP Textillate, in the left, and add all your text and animation. After it, can you put it intro content with shortcode or using widgets.

I hope help you.