Javascript jQuery滑块在第一次加载幻灯片时不显示效果

我是jQuery的新手，我有一个问题，我相信，对你们中的一些人来说，这将是小菜一碟。：）

我创建了一个自定义图像滑块，除了一件事之外，它几乎可以按照我的要求工作。每个幻灯片转换中应该出现的效果只有在通过所有幻灯片后才会显示。在此之前，它们会立即显示出来——根本没有效果

这是链接，下面是代码片段

        $(document).ready(function () {

        var slideHovered = null;
        var slideDuration = 7000;
        var slideEffectDuration = 2500;

        //Initial hiding of inactive slides - is it actually necessary?
        $('.slide:not(.active)').each(function () {
            $(this).css({
                "visibility": "hidden"
            });
        });

        //Check if mouse is hovering over slider
        setInterval(function () {
            slideHovered = $('.leftContentWrapper').is(":hover");
        }, 500);

        //Function to start slideshow
        function startSlides(slideDirection) {
            var slideNumber = $('.slide.active').data('slide');
            var highestSlideNumber = null;

            //Function to find highest slide number
            $('.slide').each(function () {
                var value = parseFloat($(this).attr('data-slide'));
                highestSlideNumber = (value > highestSlideNumber) ? value : highestSlideNumber;
            });

            slideNumber = slideDirection == 'next' ? slideNumber = slideNumber + 1 : slideNumber = slideNumber - 1;
            slideNumber = slideNumber <= 0 ? slideNumber = highestSlideNumber : slideNumber = slideNumber;
            slideNumber = slideNumber > highestSlideNumber ? slideNumber = 1 : slideNumber = slideNumber;

            $('.slide.active').removeClass('active').hide();
            $('[data-slide="' + slideNumber + '"]').addClass('active').fadeIn(slideEffectDuration, function () {});
            $('.slide.active').css({
                'visibility': 'visible'
            });
        }

        //Function to change slide every x seconds if there is no hovering over
        setInterval(function () {
            if (slideHovered === false) {
                startSlides('next');
            } else {
                return false;
            }
        }, slideDuration);

        $('.control').click(function () {
            var slideDirection = $(this).attr('id');
            startSlides(slideDirection);
        });
    });

$（文档）.ready（函数（）{
var slideHovered=null；
var slideDuration=7000；
var slideEffectDuration=2500；
//初始隐藏非活动幻灯片-是否确实需要？
$（'.slide:not（.active'）。每个（函数（）{
$（this.css）({
“可见性”：“隐藏”
});
});
//检查鼠标是否悬停在滑块上
setInterval（函数（）{
SlideOvered=$（'.leftContentWrapper'）。是（“：hover”）；
}, 500);
//函数启动幻灯片放映
功能开始滑动（滑动方向）{
var slideNumber=$（'.slide.active'）。数据（'slide'）；
var highestSlideNumber=null；
//用于查找最高幻灯片编号的函数
$（'.slide'）。每个（函数（）{
var value=parseFloat（$（this）.attr（'data-slide'）；
highestSlideNumber=（值>highestSlideNumber）？值：highestSlideNumber；
});
slideNumber=slideDirection==“下一步”？slideNumber=slideNumber+1:slideNumber=slideNumber-1；
slideNumber=slideNumber highestSlideNumber？slideNumber=1:slideNumber=slideNumber；
$（'.slide.active'）.removeClass（'active'）.hide（）；
$（'[data slide=“'+slideNumber+'“]'）。addClass（'active'）。fadeIn（slideEffectDuration，function（）{}）；
$（'.slide.active'）.css({
“可见性”：“可见”
});
}
//功能，在没有悬停的情况下，每x秒更改一次幻灯片
setInterval（函数（）{
如果（滑动覆盖===false）{
开始滑动（“下一步”）；
}否则{
返回false；
}
}，滑动教育）；
$（'.control'）。单击（函数（）{
var slideDirection=$（this.attr（'id'）；
开始滑动（滑动方向）；
});
});

---

请注意，如有任何额外的代码建议或建议，我们将不胜感激。

问题出在您最初的隐藏处，请将其更改为：

            $(this).css({
                "display": "none"
            });

---

谢谢，这样做既快速又高效：）您还可以删除底部的一些可见性修复代码（这就是为什么在第一次运行之后，当可见性设置为visible后，它会工作的原因）