Jquery 另一种方法是防止双击

在这里，我有一个简单的自定义向上/向下滑动动画，所有代码都归功于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);
    }
});

塔克斯

Pedro

jQuery.animate的队列选项不解决您的问题吗？

jQuery.animate的队列选项不解决您的问题吗？

检查元素.is是否：animated并返回false；如果希望在触发另一个动画之前完成动画

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

此外，对于top属性，可以使用“+=90px”和“-=90px”代替

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

检查element.is是否为：animated并返回false；如果希望在触发另一个动画之前完成动画

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

此外，对于top属性，可以使用“+=90px”和“-=90px”代替

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

---

我认为这里最有用的方法是在新单击时停止动画，只听最后一次单击。另外，你需要根据动画元素的当前位置来计算你的位置，因为当你在动画的中间点击时，它会把你扔掉。

类似于全局变量：

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);
    }
});

---

我认为这里最有用的方法是在新单击时停止动画，只听最后一次单击。另外，你需要根据动画元素的当前位置来计算你的位置，因为当你在动画的中间点击时，它会把你扔掉。

类似于全局变量：

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);
    }
});

如果可以使用按钮，请尝试以下操作：

动画完成后，删除禁用的属性

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

如果可以使用按钮，请尝试以下操作：

动画完成后，删除禁用的属性

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

这里有一个更新的

正如我在前面的评论中提到的，主要问题是，您正在根据动画元素本身的当前位置来确定要设置动画的新位置。这意味着，如果在动画进行到一半时启动一个新动画，偏移将变得不稳定

解决方案是预先计算所有偏移，以便始终知道要设置动画的正确偏移，而不管事物的当前状态如何。您可以在上面发布的JSFIDLE中看到这一点，但以下代码仅供参考：

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);
});

这里有一个更新的

正如我在前面的评论中提到的，主要问题是，您正在根据动画元素本身的当前位置来确定要设置动画的新位置。这意味着，如果在动画进行到一半时启动一个新动画，偏移将变得不稳定

解决方案是预先计算所有偏移，以便始终知道要设置动画的正确偏移，而不管事物的当前状态如何。您可以在上面发布的JSFIDLE中看到这一点，但以下代码仅供参考：

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);
});

---

我会这样做：

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);
}

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

---

我会这样做：

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);
}

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

---

我认为问题在于，您是根据元素的当前位置设置动画位置，而不是基于一些独立于动画本身的固定尺寸。@Pedro如果您将上下更改为buttonsHi ebram，可以吗我不确定。。。实际上，我在我的项目中使用了一个带有mouseenter/mouseleave/click的自定义动画按钮来触发滑动。我认为问题在于您正在根据元素的当前位置设置动画位置，而不是基于一些独立于动画本身的固定尺寸。@Pedro如果您将上下更改为buttonsHi ebram，可以吗我不确定。。。事实上，我在我的项目中使用了一个带有mouseenter/mouseleave/click的自定义动画按钮来触发滑动。这在某种意义上是可行的，但它不允许用户多次单击来进一步向下/向上跳。这很好，谢谢。至于jmar777的观察结果，可能是鼠标下降/鼠标移动？我们可以使用什么代码来进行连续滑动？@Pedro查看下面jmar777的解决方案-这就是您所要求的吗？这在某种意义上是可行的，但它不允许用户多次单击以进一步向下/向上跳跃。这很好，谢谢。至于jmar777的观察结果，可能是鼠标下降/鼠标移动？我们可以使用什么代码来进行连续滑动？@Pedro查看下面jmar777的解决方案-这就是您想要的吗？再次感谢您ebram。要收养吉姆吗

---

jimmy1995的解决方案。再次感谢你ebram。不过，我们将采用jimjimmy1995的解决方案。