If hover: re-call function after animation has completed

102 Views Asked by At

I have a shelf of content which is scrollable. When you hover over the left or right buttons, the shelf slides as such. This all works perfectly.

When you click the left or right buttons the shelf jumps the width of the shelf. Also working perfectly.

What I would like to do is for the shelf to continue scrolling after the jump, where as at the moment it stops all together until you re-hover your mouse. I presume this is just re-calling the function after the jump is complete, so i have added an if (hover) after .promise().done(), however I'm not sure of the rest.

Please advise.

Thanks.

Fiddle

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{

                        }
                });

        });
});
1

There are 1 best solutions below

0
CDspace On BEST ANSWER

Checking the possible jQuery events I found mouseover() can handle or trigger the event. Put $('.scroll-arrow').mouseover(); in your if (hover) check and it should work.

EDIT I tried it in the fiddle, and noticed you'll have to keep track of which arrow is/was hovered, but this should get you on track