Обратный вызов Jquery fadeOut/fadeIn не работает

Я создаю небольшой скрипт для анимации списка Вот моя html-структура:

<ul>
   <li class="slider"> Item-1 </li>
   <li class="slider"> Item-2 </li>
   <li class="slider"> Item-3 </li>
  ...
   <li class="slider"> Item-13 </li>
   <li class="slider"> Item-14 </li>
   <li class="slider"> Item-15 </li>
</ul>

<button> Next </button>

Я показываю только четыре li одновременно, кнопка «Далее» исчезает из отображаемых четырех li et fadeIn следующие четыре один. Но фейды применяются оба вместе. Я пытался использовать функцию обратного вызова на первом фейде, но я не могу заставить его работать.

вот скрипт:

$('li:gt(3)').css('display', 'none');

//Define the interval of li to display
var start = 0;
var end = 4;

//Get the ul length
var listlength = $("li").length;

$("button").click(function() { 

  // FadeOut the four displayed li 
  $('ul li').slice(start,end).fadeOut(500, function(){

        // Define the next interval of four li to show
        start = start+4;
        end = end+4;

        // Test to detect the end of list and reset next interval
        if( start > listlength ){
          start = 0;
          end = 4;
        }

        //Display the new interval
        $('ul li').slice(start,end).fadeIn(500);
  });    
});

Есть подсказки?