Javascript JQuery淡出函数在第一次尝试时未出现

我有一个页面，它的一侧有一个无序列表，可以在不同的容器之间切换，列表右侧有图像

有问题的页面位于以下URL，标题标记中包含JQuery代码：

在页面加载（例如“Burgundy”）后，单击左侧的项目后，右侧的图像（由div容器封装）将消失，而不显示动画，尽管JQuery中使用了“淡出”功能

第一次更改后，淡出功能按预期操作，右侧的div淡出，新div淡入

有人能帮我弄清楚为什么会发生这种事吗

有关守则如下：

JQuery

$(document).ready(function () {
        $(".catList li").click(function() {

            $(".catList li").removeClass('selectedRange');
            $(this).addClass("selectedRange");
            var clickedItem = $(this).index(".catList li");

            $(".images div").stop().fadeOut('slow', function () {
                $(".images div").removeClass("selectedImageGroup");
            });

            $(".images div:eq(" + clickedItem + ")").delay(750).fadeIn(function () {
                $(".images div:eq(" + clickedItem + ")").addClass("selectedImageGroup");
            });


        });
    });

HTML:

IvoryModernist套房带有一丝怀旧之情
勃艮第当代经典
EverGreen极简主义者，具有独特的淋浴功能

这是因为您有

显示：阻塞！重要的覆盖<代码>显示：无（我无法解释为什么它不工作，但这是问题的原因。）单击一次后它就工作了，因为它将内联样式设置为
display:block。如果删除元素的CSS行
display:none
，则淡入淡出也会在第一行生效

破损示例：，
添加此行：

$('.images div:first').show();

紧接着

$(document).ready(function () {

请在您的问题中张贴相关代码。现场链接很好，但明天可能会消失，社区希望你的问题能够在该事件中幸存下来。这里很好：谢谢，你能告诉我为什么它在我的现场页面上不起作用吗？谢谢，我知道为什么现在这样，我已经做了适当的更改。我删除了重要的覆盖，并使div以编程方式显示，而不是使用CSS。@Lukes123好吧，它不能从CSS工作，但可以从内联样式工作，这没有多大意义。查看jQuery，看看是否可以找到原因。
$(document).ready(function () {