将 DOM 操作与轮播中的样式更改同步时出现问题

Question

不久前我构建了一个基本的图片轮播，我终于可以将其从MooTools转移到jQuery，这样我就可以放弃MooTools了。我已经让脚本完全正常运行，但是无论出于何种原因，当轮播向一个方向滑动时，您都可以看到它自行重置的"啪"声。

我试过使用它处理所有内容的顺序，但无论如何，它似乎总是只在一小部分内不同步。

这是我的代码副本：https://jsfiddle.net/Chaosxmk/pf6dzchm/代码的违规部分是这样的：

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);

Answer 1

问题是$.fadeOut()在元素上设置了display:none，这会导致setTimeout()回调中出现一些奇怪的渲染问题。如果您改用$.fadeTo()，效果会更好：

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);
}

为简单起见，我使用了 400 毫秒的持续时间，但您可以将其设置为您需要的任何时间。

JSFiddle