Take the 2-minute tour ×

I have build a rotating carousel using css. The carousel is built of 'ul' tag. When navigating left/right I add a 'li' to the left or right of the list (cloning the relevant value and appending/prepending it). Then I am correcting the left value of the 'ul' and moves the 'ul' using the css transition for the animation. This is used for achieveing an endless navigation effect with animations.
The animation works great for the 'next' navigation, but fail to work on the 'back'. The most confusing part for me is that when debugging the 'back' code the animation does work! (maybe it is a timing problem, but the, why does the 'next' works???)

A demonstration for the problem is here: jsfiddle

Please notice: this is not my real code. The real code is wrapped in an object oriented-style plugin, with validations for cases such as user fast clicking forward and backwards, and a polyfill for i.e, using jQuery 'animate'. I also did consider using a ready made plugin but the requirements did not meet those I found...

share|improve this question
I assume it is related somehow to timing. When adding settimeout to the animation the problem disappears. Any ideas? See example –  Yaniv Oct 7 '12 at 6:50
add comment

1 Answer

The issue stumps me somewhat; when adding alerts in the middle (around the addClass call), it seems to work a bit. It probably has to do with the timing of the browser's DOM update, and at least to me, this is a HUGE red flag for compatibility.

Since you're relying upon jQuery anyway, I'd suggest instead that you go with jQuery animations. The code is smaller, the functionality is supported, and works in browsers pre-CSS3. I've mocked up a fiddle, based on yours that does exactly what you expected of your own, just using .animate() instead.

Note that I make use of the swing jQuery easing; if you want more easing types (like the ease-in-out that you had in the CSS), try the jQuery easing plugin.

Code used (on .prev button):

$('.prev').on('click', function() {
    var $childelement = $('ul');
        'left': '-150px'
    }).animate({ 'left': '-50px' }, 400, "swing", function() {
        console.log('transition ended');
share|improve this answer
Thanks. I have the exact code as a polyfill for older browser. The issue is that there is a huge performance difference between jQuery animate and css3 transitions. You can actually see that the difference when switching between those two methods. Please refer to this –  Yaniv Oct 7 '12 at 6:36
@Yaniv Since jQuery 1.8, this is negligible (they redesigned the animation code in 1.8). Additionally, the tests on that blog show animating 1,849 items at the same time. However, if you are still so concerned with this, you can use this plugin which automates CSS3 transitions for you, using jQuery. –  Eric Oct 7 '12 at 19:02
add comment

Your Answer


