jQuery：仅在完全完成后重复动画

vmdwslir 于 2023-01-30 发布在 jQuery

关注(0)|答案(2)|浏览(103)

- 编辑：**感谢mplungian，我现在知道了去抖动，特别是节流，这似乎是一个很好的解决我的问题的方法。但是我还不知道如何用jQuery "animate"实现它。

我有这样的脚本：

$(document).on('click','#right',function(){
    if($(this).hasClass('ready')){
        $(this).removeClass('ready');
        $('#slider').animate(
            {'margin-left': '-=200px'},
            { duration:1100,easing:'easeOutElastic',queue: false,complete:function()
                {
                    $('#right').addClass('ready');
                }
            }
        )
        // ...
        sliderPosition++;   
    }

})

这是一个按钮点击时触发的滑块，因为在用户再次点击之前必须完成一个重要的动画（否则滑块宽度很快就会混乱），所以我使用了一个"ready"类来防止用户在前一个动画完成之前点击。
从技术上讲，它工作得很好，但它不"感觉"的权利，滑块看起来不像"React"不够，因为快速点击将只能看到滑块移动每一个其他的点击。
但是如果我摆脱了". ready"条件，那么滑块很快就会乱掉，因为每个动画都可以在前一个动画完成之前被激发。

- 那么，是否有一种方法可以让脚本考虑每一次点击，但只是使它们不同，直到同一动画的所有先前迭代完成？**

谢谢。

jquery

来源：https://stackoverflow.com/questions/75267965/jquery-get-animate-to-repeat-only-after-full-completion

2条答案

按热度按时间

h5qlskok1#

尝试添加.stop

$('#slider').stop().animate(

像这样

$(document).on('click','#right',function(){
    if($(this).hasClass('ready')){
        $(this).removeClass('ready');
        $('#slider').stop().animate(
            {'margin-left': '-=200px'},
            { duration:1100,easing:'easeOutElastic',queue: false,complete:function()
                {
                    $('#right').addClass('ready');
                }
            }
        )
        // ...
        sliderPosition++;   
    }
})

赞(0）回复(0）举报 2023-01-30

gzszwxb42#

它已经解决了使用油门：

let timeout;

const throttle = (func, limit) => {
    if (!timeout) {
        func();
        timeout = setTimeout(function() {
          timeout = undefined;
        }, limit);
    }
};

$(document).on('click','#right',function(){
    throttle(function(){
        $('#slider').animate(
            {'margin-left': '-=200px'},
            { duration:1100,easing:'easeOutElastic',queue: false}
        )
        // ...
        sliderPosition++; 
    }, 500);
})

这是最好的两个世界，因为动画是在一个稳定的步伐，无论点击多少次。所以这将给予人的印象，滑块是完全被动的，而不一定激发动画的每一次点击，如果他们太快，太多。所以它不是那么多的点击量比关于保持动画进行，而你点击。

赞(0）回复(0）举报 2023-01-30

我来回答

jQuery：仅在完全完成后重复动画

2条答案

相关问题

热门标签

最新问答