我有一个可滚动的内容架。当您将鼠标悬停在左或右按钮上时,架子会滑动。这一切都完美无缺。
当您单击向左或向右按钮时,架子会跳过架子的宽度。也可以完美运行。
我想做的是让架子在跳跃后继续滚动,就像现在它一起停止一样,直到你重新悬停鼠标。我认为这只是在跳转完成后重新调用该函数,所以我添加了一个if (hover)
after .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{
}
});
});
});