Question

I’ve been trying to create an effect for a previous/next effect that I saw at this website but can’t achieve it correctly and would like to know if someone can help me please.

Here it’s mine so that you can inspect it and see the code, it’s not working fine in Firefox and only it’s you pass the mouse quickly it flickers and works really bad.
I would like to achieve the same effect as in the website of Final Fantasy.

I’ve tried also using jQuery UI hide and show but couldn’t make it run correctly at Firefox and Opera either.

Since I’m only trying to achieve the effect correctly I don’t have an hover state, only inverted the arrow when using mouseenter.

Answer 1

Put it for Previous button in previousNextSlider.js:

//Previous
$('.bx-prev').on('mouseenter', function(){
    $(this).removeClass(".js-opened").stop().animate({
        'margin-left': '-87px'
        }, {
        duration: 300,
        complete: function(){
            $(this).css({
                'background-image' : 'url(images/nextSliderButton.png)'
            }).addClass(".js-opened").stop().animate({
                'margin-left' : 0
            }, {duration: 100});
        }
    });
}).on('mouseleave', function(){
    if ($(this).hasClass(".js-opened"))
        $(this).stop().animate({
            'margin-left': '-87px'
            }, {
            duration: 100,
            complete: function(){
                $(this).css({
                    'background-image' : 'url(images/previousSliderButton.png)'
                }).removeClass(".js-opened").stop().animate({
                    'margin-left' : 0
                }, {duration: 300});
            }
        });
    else
        $(this).stop().animate({
            'margin-left': 0
            }, {duration: 300});
});

just tried and it works perfect fixing “quick mouse move” issue.