jquery - 轮播第二张幻灯片上的错误

Question

所以，我在过去的 8 个小时里一直在尝试构建自己的轮播，我是 jquery 的新手。 所以我在第二张幻灯片上有一个错误。

如果您看到当我单击第二个“下一个”时，应该会出现“上一个”按钮，但它仅在第二次单击时出现。

这是我的代码:

$(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 列为第四个参数，但作为第三个命名参数 (easing) 需要一个字符串值，如果如果您在该位置传入函数名称，jQuery 将意识到您正在跳过 easing 参数，并将其解释为complete 参数。

更多注释:

对于 jQuery 初学者来说干得好。一些提示:

• 广泛使用的约定是在保存 jQuery 对象的变量名前面添加
  带有 $，例如: var $sliderV = $('#slide-wrap-vertical');这增加了语义/有助于跟踪什么是什么，特别是对于function argument-names 它表明您期望传入一个 jQuery 对象

• 您在最外层(非全局)范围设置了 sliderV，因此它将在代码中的任何位置可用，但您会再重新捕获 jQuery 对象 2 次，而不仅仅是重新捕获-使用 slider V。这是 JavaScript 引擎的额外工作。在这种情况下，差异可以忽略不计，但是当您继续处理更大的 jQuery 元素时，您需要变得更小气，所以最好现在就开始养成好习惯。

• 您跟踪哪张幻灯片“打开”的方法依赖于界面的不可靠工件(查找垂直位置为 0 的幻灯片)。例如，如果您决定通过添加顶部边距来在滑动框架周围添加缓冲区，该怎么办？现在，当它稳定下来时，任何幻灯片都不会处于 0 位置。一种替代方法是在代码开头将索引变量设置为 0，然后在用户向前或向后导航时递增/递减索引，在单击导航时立即更改此值，并根据索引的值隐藏上一个/下一个按钮(例如，如果索引为 0，则隐藏上一个)。现在，您也不依赖于完成测试的动画。