Problem synchronizing DOM manipulation with style changes in carousel

user_2989682 0
Viewed 57

I built a basic picture carousel a while back, and I'm finally getting around to transferring it from MooTools over to jQuery so I can drop MooTools. I've got the script completely functional, but for whatever reason when the carousel slides in one direction, you can see a "pop" where it resets itself.

I've tried playing around with the order it handles everything, but no matter what it seems to always desync for just a fraction of a section.

Here's a copy of my code: https://jsfiddle.net/Chaosxmk/pf6dzchm/ The offending section of code is this:

styles['position'] = 'absolute';
styles[self.params.axis] = -32768;
$(self.list[0]).css(styles).hide();

$(self.list[0]).appendTo(self.carousel);

$(self.list[conf.mi]).css(self.params.axis, (100-conf.pr)+'%');

styles = {};
styles['position'] = 'relative';
styles[self.params.axis] = 'auto';
$(self.list[conf.mi]).css(styles);
jquery javascript
1 Answers

Issue is that $.fadeOut() sets display:none on the element, which causes some strange rendering issues in your setTimeout() callback. Works better if you use $.fadeTo() instead:

if (self.params.direction) {
    // Go forward
    self.carousel.css(self.params.axis, '-'+conf.pr+'%');
    $(self.list[0]).fadeTo(400, 0);
    $(self.list[conf.mi]).css(self.params.axis, '100%').fadeTo(400, 1);
} else {
    // Go backward
    self.carousel.css(self.params.axis, conf.pr+'%');
    $(self.list[conf.mi-1]).fadeTo(400, 0);
    self.list.last().css(self.params.axis, '-'+conf.pr+'%').fadeTo(400, 1);
}

For simplicity I used a 400ms duration, but you can set this to whatever you need.

JSFiddle

user_4641880
Related