jQuery вместо перемещения влево. он исчезает. Slider

Question

Я работаю над простым слайдером, но я не мог разобраться в одном. Я хочу, чтобы он исчезал и выходил вместо того, чтобы двигаться влево.

Я думаю, что чего-то не хватает.

Спасибо за ваше время. Код ниже, если вы можете помочь мне, дайте мне знать.

 jQuery(document).ready(function ($) { 

    $(function(){ 
    setInterval(function() { 
     moveRight(); 
    }, 3000); 
    }); 

    var slideCount = $('#slider ul li').length; 
    var slideWidth = $('#slider ul li').width(); 
    var slideHeight = $('#slider ul li').height(); 
    var sliderUlWidth = slideCount * slideWidth; 

    $('#slider').css({ width: slideWidth, height: slideHeight }); 

    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); 

    $('#slider ul li:last-child').prependTo('#slider ul'); 

    function moveLeft() { 
     $('#slider ul').animate({ 
      fadeto: + slideWidth 
     }, 500, function() { 
      $('#slider ul li:last-child').prependTo('#slider ul'); 
      $('#slider ul').css('left', ''); 
     }); 
    }; 

    function moveRight() { 
     $('#slider ul').animate({ 
      fadeTo: - slideWidth 
     }, 500, function() { 
      $('#slider ul li:first-child').appendTo('#slider ul'); 
      $('#slider ul').css('left', ''); 
     }); 
    }; 

    $('a.control_prev').click(function() { 
     moveLeft(); 
    }); 

    $('a.control_next').click(function() { 
     moveRight(); 
    }); 

}); 

Answer 1

Всюду по функции вам не нужно находить ширину, высоту и не нужно скользить влево или вправо, потому что, если вы переместите div с краем, он даст только эффект слайда. Вы можете просто .fadeOut() текущий div и .fadeIn() следующий div.

Вот короткий и правильный JQuery для moveRight() и moveLeft() функция с эффектом постепенного изменения

function moveRight(){ 
    $('#slider ul li.active').fadeOut(); 
    $('#slider ul li.active').next().addClass('active').fadeIn(); 
    $('#slider ul li.active').eq(0).removeClass('active'); 
    } 
    function moveLeft(){ 
    $('#slider ul li.active').fadeOut(); 
    $('#slider ul li.active').prev().addClass('active').fadeIn(); 
    $('#slider ul li.active').eq(1).removeClass('active'); 
    } 

Пример: https://jsfiddle.net/m7rfdfoa/1/

Answer 2

Не следует ли «fadeeto» быть «fadeTo» в функции moveLeft?