JQuery простой слайдер не работает, как и предполагалось

Question

я новичок в javascript, и я могу заставить этот слайдер работать, но не точно, что я хочу, что я делаю не так?

В основном, слайдер предназначен для плавного увеличения и уменьшения в моемон просто отображается прямо lol.

Вот код

    $(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>

CSS:

    #simlpeslider{
    width:100%;
    float:left;
    height:150px;
    overflow:hidden;
}

#simlpeslider div {
    position:absolute;
    display:none;
    }

#simlpeslider div.previous {
    display:none;
    }
#simlpeslider div.current {
    display:block;
} 
#simlpeslider div.normal {
    display:none;
} 

Спасибо

Answer 1

Просто вам нужно вызвать fadeOut () перед удалением класса!

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

Это сначала удалит ваш класс «предыдущий» из элемента, чтобы он возвратил свой стиль по умолчанию, унаследованный стилемдля id simpleslider (обратите внимание на опечатку), который отображается: нет;так что fadeOut () не будет иметь никакого эффекта.

То, что вы хотите:

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

То же самое относится и к постепенному появлению.Если вы сначала добавите класс, который содержит display: block;элемент сразу станет видимым, а fadeIn не будет иметь никакого эффекта.