Ошибка на втором слайде карусели

Question

Итак, я провел последние 8 часов, пытаясь построить собственную карусель, я новичок в jquery. У меня есть ошибка на втором слайде.

Если вы видите, когда я нажимаю на второй, появляется кнопка prev, но вместо этого она появляется только во втором щелчке.

Вот мой код:

$(document).ready(function() { 
    var sliderWidth  = 300; // Give the size of the window 
    var sliderV   = $('#slide-wrap-vertical'); // Assigns the container that has all the sectiosn that will be scrolled vertically 
    var sliderCount  = $('#slide-wrap-vertical').children().size(); // Gets the size of the vertical slider  
    var sliderHeight = sliderCount * sliderWidth; // Takes the height of the slider 

    $('#slide-wrap-vertical').css('height', sliderHeight); // assigns the height 
    //$('a.temp').text(sliderHeight);  

    showHideDirection(); 

    $('a.nav-top-prev').on('click',function() { 

     $('#slide-wrap-vertical > div').animate({ 
      'top': '+=' + sliderWidth + 'px' 
     }, 500); 
     showHideDirection(); 

    }); 

    $('a.nav-top-next').on('click', function() { 
     $('#slide-wrap-vertical > div').animate({ 
      'top': '-=' + sliderWidth + 'px' 
     }, 500); 
     showHideDirection(); 

    }); 


    function showHideDirection() { 

     $(sliderV).children().each(function(){ // Checks all the children of the vertical carousel   

      if ($(this).position().top == 0) { 
       var index = $(this).index(); 

       $('a.nav-top-prev').toggle(index!==0); 
       $('a.nav-top-next').toggle(index!==sliderCount-1); 
      } 

     }); 
    } 


}); 

Я добавил jsfiddle, а если вы хотите увидеть функциональность

http://jsfiddle.net/Dethdoll/WkFVs/12/

Answer 1

Вызов одушевленного будет асинхронным с кодом, который следует за ним , поэтому последующие строки кода начнут выполнение до, анимация будет завершена. Таким образом, showHideDirection по-прежнему видит вашу позицию как на первом слайде, сразу после того, как вы щелкнули его только один раз. Это нужно вызвать только после завершения анимации.

Способ сделать это - назначить showHideDirection как аргумент обратного вызова animate(), а не называть его следующей строкой кода. В .animate() documentation называет этот параметр complete:

$('a.nav-top-next').on('click', function() { 
    $('#slide-wrap-vertical > div').animate({ 
     'top': '-=' + sliderWidth + 'px' 
    }, 500, showHideDirection); 
}); 

примечания: документация перечисляет complete как 4 параметра Я, но в качестве 3-го по имени параметра (easing) требует строкового значения, если вы передаете имя функции вместо в этом месте jQuery поймет, что вы пропускаете параметр easing и интерпретируете его как параметр complete.

больше ноты:

Молодцы для начинающих Jquery. Несколько указателей:

• Широко используемое соглашение является предварять переменные-имена, которые держат JQuery объекты
  с $, например: var $sliderV = $('#slide-wrap-vertical'); Это добавляет семантика/помогает следить за то, что, что, в частности, для аргумента функции -names это показывает, что вы ожидали объект JQuery прошел в

• вы настраиваете sliderV на внешней (не глобального) масштаба, поэтому он будет доступен в любом месте вашего кода, но вы вернуть объект JQuery Еще 2 раза вместо просто r e-using sliderV. Это дополнительная работа для механизма javascript. В этом случае разница будет небрежной, но по мере того, как вы начнете работать с более крупными проектами jQuery, вам нужно быть более сдержанным, поэтому лучше начать с хороших habbits сейчас.

• Ваш метод отслеживания слайдов «включен» основан на ненадежном артефакте интерфейса (поиск слайда в вертикальном положении 0). Что, если вы, скажем, решили добавить буфер вокруг рамки слайда, добавив к нему верхний край? Теперь ни один слайд никогда не будет в 0, когда он опустится. Одним из альтернатив было бы установить индексную переменную как 0 в начале вашего кода, а затем увеличивать/уменьшать индекс при прохождении пользователем вперед или назад, немедленно изменить это значение при нажатии на навигатор и скрыть превью/следующая кнопка в зависимости от значения индекса (например,скрыть превью, если индекс равен 0). Теперь вы также не зависите от завершения анимации для своего теста.