CODEWITHSUNDEEP
jqueryanimationhover
Andrea Turri
Andrea Turri

Reputation: 6500

jQuery, hovering after animation

I'm doing a particular carousel and it has:

And the functionality are:

The code at the moment is rude, full of if controls to prevent animations, queues, etc... but it seems to work fine for the moment.

I'm using jCarousel as plugin for it and jQuery easing.

I prepared a JsFiddle for you.

The BUG:

There is one bug on it. If you hover the next button (keep your mouse pointer hovered on the next button), click one time, keep always hovered without going out from the button, click one more time. The images are misaligned.

This is caused because after the animation it doesn't recognize anymore to be on the hover state.

How can I fix it?

Upvotes: 0

Views: 361

Answers (2)

nkh
nkh

Reputation: 5791

Set z-index to 10 or something for your next button, it'll always be on top, also the part where you add the images just to play it safe add z-index to 0 or 1 as well.

Upvotes: 0

insertusernamehere
insertusernamehere

Reputation: 23600

So I edited your fiddle and I hope this is the behavior you expect. And it's also not 'jumpy' anymore like your first version.

I created three new variables:

var hovered    = false;
var animating  = false;
var correction = null;

The first one stores whether one of the element was hovered, the second one whether the animation is running and the third stores, which correction has to be used (left or ride side).

Than I've updated the functions to keep track of what's happening:

$carouselNext.hover(function () {
    if (!animating)
        shunt('-=20');
    hovered = true;
    correction = 'next';
}, function () {
    if (!animating)
        shunt('+=20');
    hovered = false;
    correction = 'next';
});

Than I've updated the click-hanlder:

$carouselNext.bind('click', function(e) {
    move(0);
    e.preventDefault();
});

And the move()-function:

function move(dir, par) {
    if(!animating) {
        animating = true;
        if(dir == 0) {
            carousel.next();
        } else {
            carousel.prev();
        }
        setTimeout(function() {
            shunt( ( hovered ? '+=0' : ( 'next' == correction ? '+' : '-' ) + '=20' ) );
            animating = false;
        }, 1700);
    }
}

Here is the Demo - hope you get everything I've updated.

DEMO

jsfiddle

Note: The variables from the beginning can be declared within function carousel_initCallback(carousel)- somehow it wasn't stored in the fiddle …

Upvotes: 1

Related Questions