Understanding simple carousel transition code

Question

I'm new to jQuery in general and basically made this one slide transition, it has minimal and compact code:

$(function () {
    var str_next = $('.cara .item').eq(1);

    function slide(elem) {
        elem.addClass('next');

        $('.cara .item').each(function() {
            if ($(this).hasClass('active')) {
                console.log('does have it');
                $(this).removeClass('active');
            }
        });

        setTimeout(function () {
            elem.removeClass('next').addClass('active');
        }, 2000);
    }

    slide(str_next);
});

Fiddle here

If you have a close look at the jQuery the following lines of code are causing the one slide transition effect:

setTimeout(function(){
    elem.removeClass('next').addClass('active');
}, 2000);

Now for the transition effect to take place it is very important that the next class be attached to elem, but in the above code the next class is being removed from elem and there is still a transition, why?

For example if I were to change the above lines of code to as follows:

setTimeout(function(){
    elem.removeClass('next');
    setTimeout(function() {
        elem.addClass('active');
    }, 500);
}, 2000);

There would be no transition, so how come the below works:

setTimeout(function(){
    elem.removeClass('next').addClass('active');
}, 2000);

Why is it that inspite of removing next class the transition takes place?

Answer 1

The transition does not play because it relies on the positioning of the image.

Before the image slides into view its display property is set to none, making it invisible and its position is unchanged.

By adding next class the position of the item is set to left: 100%, this causes it to move to the right, effectively out of view.

When you now remove the next class and add the active class the image's display property is set to block, making it visible and by removing the next class the image returns to its original position (where you can see it after the animation).

Now if you remove the next class first the image would move to its original position while being invisible, that's why there's no animation.

So to answer your question: the next class provides a starting position for the movement animation, if the image is not in that starting position it doesn't have to move and so there is no animation.

Edit clarification: The transition always plays in the background, only because the active class is added it becomes visible. So even if you remove the next class before adding the active class the transition starts playing and becomes visible. The transition comes from the difference in position the next class causes, the visibility of the images comes from the active class, these are completely separate. So the transition always plays when removing the next class, it simply isn't always visible.