Im creating a webpage and am utilizing the Simple Text Rotator plugin from http://www.thepetedesign.com/demos/jquery_super_simple_text_rotator_demo.html but I cant seem to get all 4 elements to display. It seems to pick only two of the four and keep rotating between those. The source code for the section that i'm working on is below and the website is http://www.goaptitude.com
<h1 class="promo-heading animated" data-fx="pulse">Changing how a
<strong class="text-rotator-fade color-high">
<span class="rotate">Student, Teacher, Parent, World</span>
</strong>
learns
</h1>
<script src="javascripts/jquery.simple-text-rotator.js" ></script>
Thank you for your help, I really appreciate it.
RononDex is right that the problem only is the fade part, but by this solution the order is wrong and the first tag does only appear once.
The right solution is that only a part of the code is at the wrong position.
index = $.inArray(el.text(), array)
if((index + 1) == array.length) index = -1
has to be before the "el.fadeOut()" part.
This one should solve the problem:
case 'fade':
index = $.inArray(el.text(), array)
if((index + 1) == array.length) index = -1
el.fadeOut(settings.speed, function() {
el.text(array[index + 1]).fadeIn(settings.speed);
});
break;