Javascript JQuery滑块故障-跳转

我下面的滑块似乎工作不正常。从一张幻灯片过渡到另一张幻灯片时出现故障。这是我的密码：

任何帮助都将不胜感激。非常感谢你

$(document).ready(function(){
$('.slides').first().addClass('active');
$('.slides').hide();    
$('.active').show();

$('.right').click(function(){
$('.active').removeClass('active').addClass('oldActive');    
               if ( $('.oldActive').is(':last-child')) {
    $('.slides').first().addClass('active');
    }
    else{
    $('.oldActive').next().addClass('active');
    }
$('.oldActive').removeClass('oldActive');
$('.slides').fadeOut();
$('.active').fadeIn();


  });

});

---

发生这种情况的原因是

$（'.slides'）.fadeOut（）

和

$（'.active'）.fadeIn（）同时发生。在其中一张幻灯片完全淡出之前，另一张幻灯片将中断淡出，然后淡入

我通过简单地为淡出添加延迟来修复它，如下所示：

$('.active').delay(500).fadeIn();

这将使淡入在实际触发前等待500毫秒，从而允许淡出发生。这里有一个例子说明了这一点。
问题在于您的幻灯片块。第一张幻灯片淡出时（显示：无）。在淡出动画过程中，底部幻灯片出现，并显示小故障（空白）

解决方案：只需将所有幻灯片包装在父块中，并使用“下方样式”从顶部定位所有幻灯片

.sliderContainer { position: relative;} /*parent container*/
.slides { position: absolute; top: 0; left: 0;} /*postion all slides to top*/

我已经更新了你的小提琴
 非常感谢你@Kevin！我遇到了另一个问题，在转换时，我的引号有点跳。我不知道为什么会这样，你知道为什么吗？非常感谢。