CODEWITHSUNDEEP
jquerydelaymouseentermouseleave
Matthew Collins
Matthew Collins

Reputation: 109

how to prevent mouseenter/mouseleave event animation "crossover"?

Currently I have the following script powering dynamic div content: 

$("a.mbl").click(function() {

    var mblid = $(this).attr("id");

    $("#mid-box-left").fadeOut(250, function() {
        $("#mid-box-left").html($("#mbl" + mblid).html())
        .hide()
        .fadeIn(250, function () {
            $('#mid-box-left')

            $("#mid-box").on("mouseenter", "a.testbox", function() {

                var tbid = $(this).attr("id");

                $("#mid-box-right").fadeOut(250, function() {
                    $("#mbr" + tbid).css("display", "block")
                    .hide()
                    .fadeIn(250, function () {
                        $("#mbr" + tbid)
                    });
                });
            });

            $("#mid-box").on("mouseleave", "a.testbox", function() {

                var tbid = $(this).attr("id");

                $("#mbr" + tbid).fadeOut(250, function() {
                    $("#mbr" + tbid).css("display", "none");
                    $("#mid-box-right").fadeIn(250);
                });
            });
        });
    });
    return false;
})

The functionality works by allowing the user to select from a series of logos from a logo block, which then brings up particular div content next to the logos. The user then hovers over that div content, and a hidden div is faded in over the top of the logo block. When they leave the div, the hidden div is faded back out, and the logo block back in.

The problem I am encountering is that when the user moves there mouse out of and into the a.testbox area too quickly, the two animations seem to clash, causing both the hidden div content and the logo block to appear at the same time.

Is there any way to prevent the transition animation from triggering if the user moves their mouse out of and into the relevant div "too quckly", or perhaps another way of preventing this overlap that I am seeing?

Upvotes: 2

Views: 281

Answers (1)

techfoobar
techfoobar

Reputation: 66693

You can use do an is(':animated') check on the element you want to animate to see if its currently being animated. You need to trigger an animation if the check returns false.

Upvotes: 1

Related Questions