jquery - 另一个防止双击

Question

在此jsFiddle我有一个简单的自定义向上/向下滑动动画(所有代码均归功于 ebram tharwat)。问题是......你猜对了:双击。如果您在 500 毫秒(动画完成所需的时间)内多次单击向上/向下按钮，则会把一切搞砸。我已经尝试过停止(true)；和preventDefault但无济于事。任何帮助总是非常感谢。

示例代码:

$("#upBtn").on('click', function () {
    // slide all optionMenu_* up by 80px
    var maxUp = ($('div.optionMenu').length - 3) * 90;
    if (parseInt($('.sliderContainerInside').css('top')) - 10 > -maxUp) {
        $('.sliderContainerInside').animate({
            top: parseInt($('.sliderContainerInside').css('top')) - 90 + 'px'
        }, 500);
    }
});

谢谢。

佩德罗

Answer 1

这是我的做法:

var place = 0;
var position = 10;
var limit = parseInt($('div.optionMenu').length) - 3;

$("#upBtn").click(function () {
    // slide all optionMenu_* up by 80px
    if(place > 0) {
        place--;
    }
    animate();
});

$("#downBtn").click(function () {
    // slide all optionMenu_* up by -80px
    if(place < limit) {
        place++;
    }
    animate();
});

function animate() {
    position = 10 - (place*90);
    $('.sliderContainerInside').stop().animate({
        top: position + 'px'
    }, 500);
}

记住按钮被单击的次数并直接动画到正确的点。增加了不重复相同代码两次的好处。

jsFiddle