Javascript jQuery幻灯片显示过渡完成前的空白

我试图创建一个幻灯片动画，这样当单击链接时，当前div将隐藏，而隐藏的div将显示。它似乎工作正常，但是在幻灯片效果完成之前，会出现一个空白。我如何避免这种空白，使新div产生一种滑动的错觉，而不改变当前div的位置

$（文档）.ready（函数（）{
$（“.c-f”）。单击（函数（）{
$（“#主页介绍”）.hide（）；
$（“#cf intro”）.show（“幻灯片”{
方向：“对”
}“慢”）；
});
});
。左{
宽度：50%；
背景：红色；
浮动：左；
高度：90vh；
}
.对{
宽度：50%；
背景：绿色；
浮动：对；
高度：90vh；
}
蓝先生{
宽度：50%；
背景：蓝色！重要；
浮动：对；
高度：90vh；
}
#cf简介{
背景：蓝色；
显示：无；
高度：90vh；
}

一些文本
还有一些文字
一些甚至更多的文本
一种方法是将其从文档流中删除（通过
位置：绝对
，尽管
固定
也可以），然后设置其
右侧
CSS属性的动画，如下所示（有关详细说明，请参阅JavaScript注释）：


$（文档）.ready（函数（）{
$（“.c-f”）。单击（函数（）{
//在此处设置并由两个功能使用，以确保速度始终相同
var animSpeed=“slow”；
//通过设置“位置：绝对”从文档流中删除
//（并确保宽度仍为100%）
$（“#主页介绍”）.css({
位置：“绝对”，
宽度：“100%”
}).制作动画({
//从右边“推”它
右：“100%。”
}，速度，函数（）{
//完成动画制作后隐藏
$（this.hide（）；
});
$（“#cf intro”）.show（“幻灯片”{
方向：“对”
}速度）；
});
});
。左{
宽度：50%；
背景：红色；
浮动：左；
高度：90vh；
}
.对{
宽度：50%；
背景：绿色；
浮动：对；
高度：90vh；
}
蓝先生{
宽度：50%；
背景：蓝色！重要；
浮动：对；
高度：90vh；
}
#cf简介{
背景：蓝色；
显示：无；
高度：90vh；
}

一些文本
还有一些文字
一些甚至更多的文本
谢谢。当我在我的开发服务器上尝试这一点时（无法在小提琴中复制该问题），来自cf intro的文本似乎覆盖了home intro div，然后home intro div突然消失，而没有完整的cf into div slidingjquery UI确实存在于您的开发服务器上吗？如果动画不见了，那么可能图书馆也不见了。它肯定存在。在这种情况下，我没有主意了，对不起。祝你好运。