jquery简单滑块也无法正常工作

我是javascript新手，我可以让这个滑块工作，但不完全是我想要的，我做错了什么

基本上，滑块可以很好地淡入淡出，在我的幻灯片中，它直接显示出来，哈哈

这是密码

    $(function() {
    setInterval("rotateDiv()", 5000);
});

    function rotateDiv() {
    var currentDiv=$("#simlpeslider div.current");
    var nextDiv= currentDiv.next ();
    if (nextDiv.length ==0)
        nextDiv=$("#simlpeslider div:first");

    currentDiv.removeClass('current').addClass('previous');
    nextDiv.addClass('current').fadeIn('3000',function() {
        currentDiv.removeClass('previous').fadeOut('1000');});

}

html格式如下：

<div id="simlpeslider">
                        <!-- Slide 1 -->
                        <div class="current">
                            <h6>Title 1</h6>
                            <p>Lorem ipsum dolor sit amet, consectetur elit. Maecenas non ipsum nunc, nec sagittis tellus. Lorem ipsum dolor sit amet, consectetur elit. Maecenas non ipsum nunc</p>
                        </div>
                        <!-- End Slide 1 -->
                        <!-- Slide 2 -->
                        <div>
                            <h6>iusdhfisd sdf</h6>
                            <p>Lorem ipsum dolor sit amet, consectetur elit. Maecenas non ipsum nunc, nec sagittis tellus. Lorem ipsum dolor sit amet, consectetur elit. Maecenas non ipsum nunc</p>
                        </div>
                        <!-- End Slide 2 -->
                        <!-- Slide 3 -->
                        <div>
                            <h6>eco sodalirity ltd</h6>
                            <p>Lorem ipsum dolor sit amet, consectetur elit. Maecenas non ipsum nunc, nec sagittis tellus. Lorem ipsum dolor sit amet, consectetur elit. Maecenas non ipsum nunc</p>
                        </div>
                        <!-- End Slide 3 -->
                        <!-- Slide 4 -->
                        <div>
                            <h6>asd</h6>
                            <p>Lorem ipsum dolor sit amet, consectetur elit. Maecenas non ipsum nunc, nec sagittis tellus. Lorem ipsum dolor sit amet, consectetur elit. Maecenas non ipsum nunc</p>
                        </div>
                        <!-- End Slide 4 -->
                        <!-- Slide 5 -->
                        <div>
                            <h6>ec234234234</h6>
                            <p>Lorem ipsum dolor sit amet, consectetur elit. Maecenas non ipsum nunc, nec sagittis tellus. Lorem ipsum dolor sit amet, consectetur elit. Maecenas non ipsum nunc</p>
                        </div>
                        <!-- End Slide 5 -->
                </div>

---

谢谢

简单地说，您需要在删除类之前调用fadeOut（）

currentDiv.removeClass('previous').fadeOut('1000');

这将首先从元素中删除您的类“previous”，以便它将恢复由id simpleslider（注意您的输入错误）的样式继承的默认样式，即display:none；因此，fadeOut（）将不起作用

你想要的是：

currentDiv.fadeOut('1000', function () {
   currentDiv.removeClass('previous');
});

---

淡入也一样。如果首先添加包含display:block的类；元素将立即变为可见，而fadeIn没有任何效果。

您应该为此创建一个JSFIDLE，请参见此处：jsFIDLE.netthanks以获取帮助。有道理，现在你已经说服了我。

currentDiv.fadeOut('1000', function () {
   currentDiv.removeClass('previous');
});