Question

在这个jsFiddle中，我有一个简单的自定义上滑/下滑动画（所有信用到ebram tharwat代码）。问题是......你猜对了：双击。如果您在500毫秒内（动画完成时间）多次单击向上/向下按钮，则会将所有内容都拧紧。我试过停止（真实）;并防止默认但无济于事。任何帮助总是真的很感激。

示例代码：

$("#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

检查元素.is(':animated')是否返回false;如果你想在另一个动画被触发之前完成动画

if($('.sliderContainerInside').is(':animated')){
    return false;   
}

同样对于顶级媒体资源，您可以使用'+=90px'和'-=90px'代替

parseInt($('.sliderContainerInside').css('top')) - 90 + 'px'

FIDDLE

Answer 2

我认为这里最有用的方法是在新点击时stop动画，只听最后一次点击。此外，您需要根据动画元素的当前位置以外的其他内容来计算您的位置，因为当您在动画中间单击时，它会让您失望。

像全局变量：

var target = 10;

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

Demo

Answer 3

如果可以使用按钮<button id="upBtn">Up</button>，请尝试以下jsfiddle：

if (parseInt($('.sliderContainerInside').css('top')) - 10 > -maxUp) {
        $("#upBtn").attr('disabled', 'disabled');

并在动画完成后删除已禁用的属性

$('.sliderContainerInside').animate({
            top: parseInt($('.sliderContainerInside').css('top')) - 90 + 'px'
        }, 500,function(){$("#upBtn").removeAttr('disabled');});

Answer 4

这是一个更新的demo that works。

正如我在前面的评论中提到的，主要问题是你是根据动画元素本身的当前位置确定要设置动画的新位置。这意味着，如果您在动画中期时开始制作新动画，那么您的偏移将会变得不稳定。

解决方案是预先计算所有偏移量，这样无论当前状态如何，您都可以随时知道正确的偏移量。您可以在上面发布的jsfiddle中看到这个，但这里是参考代码：

var $sliderInside = $('.sliderContainerInside'),
    $items = $('.optionMenu'),
    currentItem = 0,
    maxItem = $items.length - 3,
    itemOffsets = $items.map(function() {
        return $(this).position().top * -1 + 10 + 'px';
    }).get();

$("#upBtn").on('click', function () {
    if (currentItem >= maxItem) return;
    currentItem++;
    $sliderInside.stop().animate({
        top: itemOffsets[currentItem]
    }, 500);
});

$("#downBtn").on('click', function () {
    if (currentItem <= 0) return;
    currentItem--;
    $sliderInside.stop().animate({
        top: itemOffsets[currentItem]
    }, 500);
});

Answer 5

我将如何做到这一点：

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

Answer 6

queue的{{1}}选项是否解决了您的问题？

另一个阻止双击

6 个答案:

jsFiddle