peachananr / simple-text-rotator

Add a super simple rotating text to your website with little to no markup
http://peachananr.github.io/simple-text-rotator/demo.html
GNU General Public License v2.0
748 stars 249 forks source link

'Fade' animation skip #1

Closed svinkle closed 9 years ago

svinkle commented 11 years ago

I noticed the 'fade' animation seems to skip every other item in the list. Not sure what's up with that.

RiaanP commented 11 years ago

I can corroborate svinkle's issue. There's something wonky with the 'fade' transition. I'll try and take a look later.. might commit if I can spot the issue.

RiaanP commented 11 years ago

If I add a console trace I get double figures being traced back... it appears as though sometimes the setInterval is fired twice and then keeps running like that.

desduvauchelle commented 10 years ago

Same here. Any solutions yet? I took a look, it's so clean that I can't find how to fix :)

RiaanP commented 10 years ago

Ok I found a solution for this issue. The setInterval on line 162 fires at the exact same time as the fade animation and that causes the counter to incrememnt twice. Online 162, replace the setInterval... bit with this: setInterval(rotateMe, settings.speed*2); // Wait twice as long.

That fixes the fading, at least it did for me..

timucingelici commented 10 years ago

Hi there,

The fadeOut callback runs twice because that callback fires another fadeIn. So just change this part;

el.fadeOut(settings.speed, function() { index = $.inArray(el.text(), array) if((index + 1) == array.length) index = -1 el.text(array[index + 1]).fadeIn(settings.speed); });

with this;

el.fadeOut(settings.speed, function() { index = $.inArray(el.text(), array) if((index + 1) == array.length) index = -1 el.text(array[index + 1]); }).fadeIn(settings.speed);

bouvens commented 10 years ago

Thanks you for solution!

jiyooooon commented 8 years ago

@timucingelici Thank you for this solution. This should be implemented in https://github.com/peachananr/simple-text-rotator/blob/master/jquery.simple-text-rotator.js asap to avoid future confusion