I'm seeking assistance with my wordpress.org blog where I am attempting to incorporate Textillate animation from this source: . After downloading all the required files and uploading them to my server, following the provided instructions, and adding a header element along with multiple unordered list elements as specified on the instruction page, I am unable to achieve the desired outcome.
When testing on JS Fiddle by inputting all the relevant information including HTML, CSS, and JavaScript, the animation works perfectly. However, when transferring the exact same code to my own website, it fails to display the intended animation. My current objective is to have the animation fade in and out of three different list items, but instead, all items are showing simultaneously.
The code used on JS Fiddle can be accessed 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
});
If you have any suggestions or solutions, they would be greatly appreciated.
Sincerely,
Amanda Mays