Ползунок в li с использованием jquery

Question

Этот код работает для следующего просмотра, но не дает плавного эффекта скольжения. Пожалуйста, помогите сделать его гладким. У меня есть список вариантов данных, которые нужно отображать в слайдере с помощью следующей кнопки prev.

$(document).ready(function() { 
$('#prev').hide(); 

var $lis = $("#myList li").hide(); 
$lis.slice(0, 10).show(); 
var size_li = $lis.length; 
var x = 10, 
start = 0; 
if(size_li == x) 
{ 
    $('#prev').hide(); 
    $('#next').hide(); 
} 
$('#next').click(function (e) { 
    e.stopPropagation(); 
    $('#prev').show(); 
    if (start + x < size_li) {   
     $lis.slice(start, start + x).hide(); 
     start += 1; 
     $lis.slice(start, start + x).show(); 
    } 
    if(start + x == size_li) 
    { 
     $('#next').hide(); 
    }  
}); 
$('#prev').click(function() { 
    $('#next').show(); 
    if (start >= 1) { 
     $lis.slice(start, start + x).hide(); 
     start -= 1; 
     $lis.slice(start, start + x).show(); 
    } 

    if(start == 0) 
    { 
     $('#prev').hide(); 
    } 
}); 
}); 

Answer 1

Простейшее ответ с наименьшим кодом, чтобы добавить 'slow' атрибут hide() и show(). Таким образом, вместо hide() do hide('slow') и вместо show() do show('slow').

Вы также можете применить CSS ко всем элементам, которые показаны/скрытые, как этот

.elm { 
    transition: all lienar 500ms; 
    -webkit-transition: all lienar 500ms; 
    -moz-transition: all lienar 500ms; 
} 

В этом случае не потребуется 'slow' недвижимость.