如果悬停：动画完成后重新调用功能

Question

我有一堆可滚动的内容。 当您将鼠标悬停在左按钮或右按钮上时，书架将像这样滑动。 所有这一切都完美。

当您单击向左或向右按​​钮时，架子将跳出架子的宽度。 也完美地工作。

我想做的是让架子在跳转后继续滚动，直到现在为止全部停止，直到您重新悬停鼠标为止。 我想这只是在跳转完成后重新调用该函数，所以我在.promise().done()之后添加了if (hover) .promise().done() ，但是我不确定其余的内容。

请指教。

谢谢。

小提琴

function shelfScroll(el, modifier){
        var sl = el.scrollLeft();
        el.animate({scrollLeft: sl + (modifier * 100)}, 450, 'linear', function(){ 
                if(hover){
                        shelfScroll(el, modifier);
                }
        });
}
var hover = false;
$('.scroll-arrow').each(function() {
        var modifier = ($(this).hasClass('scroll-arrow-right')) ? 1 : -1;
        var sib = ('.shelf-slide');
        var shelf_width = $(this).siblings(sib).width();
        $(this).hover(function() {
                hover = true;
                $(this).siblings(sib).stop();
                shelfScroll($(this).siblings(sib), modifier);
        }, function() {
                hover = false;
                $(this).siblings(sib).stop();
        }).click(function(e) {
                e.preventDefault();
                $(this).siblings(sib).stop();
                $(this).siblings(sib).animate({scrollLeft: $(this).siblings(sib).scrollLeft() + (modifier * shelf_width)}, 500);
                $(this).siblings(sib).promise().done(function() {
                        if (hover){

                        } else{

                        }
                });

        });
});

Answer 1

检查可能的jQuery事件后，我发现mouseover()可以处理或触发该事件。 把$('.scroll-arrow').mouseover(); 在if (hover)检查中，它应该可以工作。

编辑我在小提琴中尝试过它，并注意到您必须跟踪哪个箭头被/被悬停了，但这应该可以使您走上正轨