Making flip effect on hover, on blur go fade with CSS + jQuery

Question

I have to do something like pexeso. When you hover element, it will flip front to back side (they have different texts) and when your mouse is out, it will fade from back to front side. This is example HTML, how it looks like:

<div class="pexeso">
    <div class="pad">
        <div class="front">1</div>
        <div class="back">ONE</div>
    </div>
    etc...

There is some CSS, to look it well (it is in the jsFiddle source, attached bellow). Then Handling mouse enter and leave with jQuery:

$('.pexeso .pad').each(function() {
    var el = $(this);
    var back = el.find('.back');

    el.on('mouseenter', function() {
        back.removeAttr('style');
        el.removeClass('before-fade').addClass('do-flip');
    });

    el.on('mouseleave', function() {
        el.removeClass('do-flip').addClass('before-fade');

        back.stop(true, true).fadeOut(250, function() {
            el.removeClass('before-fade');
        });
    });
});

Here is full example in jsFiddle: DEMO

Try to hover any element from left or right side of your screen, it will works great. But now try to hover from top or bottom, it will do weird things to graphic and also, sometimes it stucks and remains invisible.

Probably know the problem: When you hover from top or bottom, it will start flipping, and when you are too slow, it also fires event mouseleave, because flipping is in progress and you are actually at empty space. Then it calls 1st function, then second, a lot of time and it got stuck. But I don't know how to fix it, can you help me?

Answer 1

Ok guys, don't try anymore, I already found a solution. Whoever is interested, how I fixed it, here is solution:

1. In CSS, make .back element always visible, so find this line &.do-flip { and add this style .back { display: block !important; } .back { display: block !important; }
2. In jQuery, there is no need to have back.removeAttr('style'); , also this did mess with opacity style (fading effect)
3. Now wrap every "pad" with parent, for example .pad-container and give him exact sizes as .pad s, now we will manipulate with him
4. Each function will take these wrappers, not "pads", so in jQuery $('.pexeso .pad-container').each(function() {...
5. Bind events mouseenter and mouseleave on this wrapper, but changing classes remain on "pads" and fadeOut effect on back element. Also, add function .show() to this back element before fadeOut .

That's all. Here is updated version: UPDATED DEMO