Элемент списка исчезает при навигации

Question

У меня есть группа элементов списка, которую я управляю кнопками «Далее» и «Пред». Код показывает пять элементов списка за раз, если есть больше, вы можете нажать «Далее», и вы увидите еще пять - если вы нажмете «Prev», вы увидите предыдущие пять ... довольно простую операцию, и она работает , Вы можете увидеть живой пример: http://joshrodg.com/hallmark/events/.

Javascript я использую:

$(document).ready(function() { 
    var $li = $('.eo-events li'); 
    $li.hide().filter(':lt(5)').show() 
    var x = 5; 

$('#next, #prev').click(function() { 
    var m = this.id === 'prev' ? 'first' : 'last'; 
    var $m = $li.filter(':visible')[m]()[this.id + 'All'](":lt(" + x + ")"); 
    if ($m.length == 0) return; 
     $li.hide(); 
     $m.show(); 
    }); 
}); 

http://jsfiddle.net/479Fr/

То, что я хотел бы сделать, это элементы плавному вместо того, чтобы просто появляться ... вроде как: https://codepo8.github.io/simple-carousel/carousel-pointer-events.html (или что-то подобное)

Я знаю, что есть некоторые карусели, которые могут это сделать, но мне не нужно что-то громоздкое, тем более что функциональность уже работает с таким небольшим количеством кода.

Есть ли простая модификация, которую я могу сделать для того, что я уже использую, чтобы выполнить что-то вроде этого?

Спасибо,
Джош

Answer 1

Как что:

$(document).ready(function() { 
    var $li = $('#myList li'); 
    $li.hide().filter(':lt(5)').show() 
    var x = 5; 

    $('#next, #prev').click(function() { 
     var m = this.id === 'prev' ? 'first' : 'last'; 
     var $m = $li.filter(':visible')[m]()[this.id + 'All'](":lt(" + x + ")"); 
     if ($m.length == 0) return; 
     var time = 250; 
     $li.fadeOut(time); 
     setTimeout(function(){ 
      $m.fadeIn(time); 
     }, time); 

    }); 
}); 

Answer 2

Используйте JQuery .fadein/выход, что замирания анимация

http://api.jquery.com/fadein/