Jquery animateText Not Working

I’m trying some jquery out and it isn’t working as expected.

What is in the ul:li should explode, via the jquery script.

The ‘Kaboom’ bit does (I know it looks awful, I’ll sort that later) but the ‘James Winfield’ bit doesn’t.

Can anyone help?

My page is http://www.jameswinfield.co.uk/v2.html#, and the instructions for the plugin are http://lukeas14.github.io/animateText.js.

I did try to paste the code in here but it didn’t work.

Thanks
James

Seems like the last node of “.example” selector is initialised with plugin. Not too sure but try to keep both nodes with different class names.

Change the class to ul class=“james” for first container and initialise animateText plugin with .james selector.

$(".james").animateText([
    {
        offset: 0,
        duration: 1000,
        animation: "explode"
    }
]);

It is something to do with the two divs interacting with each other somehow.

I’m giving up. There must be an easier way to get an explode effect!

Thanks for responding.

Shouldn’t you have the text in the same ul and then set the options to manipulate them.

e.g. A cut down example.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>James Winfield - Underground House DJ</title>
<link rel="stylesheet" type="text/css" href="http://www.jameswinfield.co.uk/assets/css/style.css">
<link rel="stylesheet" href="http://www.jameswinfield.co.uk/css/font-awesome.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://www.jameswinfield.co.uk/animateText.js"></script>
<style>
.example{color:#fff}
</style>

</head>
<body>
<ul class="example">
		<li>James Winfield</li>
		<li>Kaboom!</li>
</ul>
</body>
<script type="text/javascript">
    var textObjects = [
        {
            offset: 0,
            duration: 2000,
            animation: 'explode'
        },
        {
            offset: 1000,
            duration: 2000,
            animation: 'explode'
        }
    ]
    $(".example").animateText(textObjects);
</script>
</html>

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.