Question

I got a problem, I have this code:

$(document).ready(function(){
    /* The following code is executed once the DOM is loaded */

    $('.clsks').mouseenter(function() {

        var ob = $(this);
        var dar = $(this).attr('ids');
        var obj1 = $('#sponsorFlip'+dar);
        var obj2 = $('#sponsorData'+dar);

        obj1.flip({
                direction:'lr',
                speed: 350,
                onBefore: function(){
                    // Insert the contents of the .sponsorData div (hidden from view with display:none)
                    // into the clicked .sponsorFlip div before the flipping animation starts:
                    obj1.html(obj2.html());

                }
            });

            // Setting the flag:
        //obj1.data('flipped',true);

        }).mouseleave(function() { var dar = $(this).attr('ids');
        var obj1 = $('#sponsorFlip'+dar); obj1.revertFlip(); });

});

I need make the event mouseenter wait until this jQuery flip finish cuz sometimes if someone mouseenter fast the mouseleave fails cuz ‘obj1.html(obj2.html());’ over it.

but I only need to make the mouseenter event wait the jQuery flip finish.

Answer 1

See the doc for the flip method: http://lab.smashup.it/flip and add an onEnd: function. Here’s an example from that doc:

$("#flipbox").flip({
    direction:'tb',
    onBefore: function(){
            console.log('before starting the animation');
    },
    onAnimation: function(){
            console.log('in the middle of the animation');
    },
    onEnd: function(){
            console.log('when the animation has already ended');
    }
})