JQuery Animate Delay Problems

Question

Below is the HTML & JQuery code I have:

HTML I have:

<div class="announcement">
    <img id="imgBanner" style="cursor: pointer;" onmouseover="showPopup();" />
</div>
<div id="divArrow" class="arrow">
    <img id="imgExpandContract" style="cursor: pointer;" alt="Arrow" border="0"onmouseover="showPopup();" />
</div>
<div id="window">
    <!-- some html content acting as a fly-out -->
</div>

JS Code:

var imgBanner = "xyx.png";
var imgArrowExpand = "xyx.png";
var imgArrowContract = "xyx.png";
var isDone = false;

function showPopup() {
    try {
        var imgWidth = $("#imgExpandContract").width();
        var posX = document.getElementById("imgExpandContract").offsetLeft + imgWidth;
        if (!$("#window").is(":animated")) {
            $("#window").animate({ left: posX }, 800, 'easeOutSine',
                                function() {
                                    isDone = true;
                                    $("#imgExpandContract").attr("src", imgArrowContract);
                                    $("#window").bind("mouseenter", function() { $("#window").bind("mouseleave", function() { closePopup(); }); });
                                }
            );
        }
    }
    catch (error) {
        //disable the banner, arrow images
        document.getElementById("imgBanner").style.visibility = 'hidden';
        document.getElementById("imgExpandContract").style.visibility = 'hidden';
    }
}

function closePopup() {
    try {
        if (isDone) {
            var posY = $("#window").width();
            $("#window").animate({ left: -posY }, 600, 'linear',
                            function() {
                                isDone = false;
                                $("#imgExpandContract").attr("src", imgArrowExpand);
                                $("#window").unbind("mouseenter");
                                $("#window").unbind("mouseleave");
                            }
            );
        }
    }
    catch (error) {
        //disable the banner, arrow images
        document.getElementById("imgBanner").style.visibility = 'hidden';
        document.getElementById("imgExpandContract").style.visibility = 'hidden';
    }
}

I am currently having 2 problems:

1. When I mouse off the #window div, there is small delay before which the mouseleave is being called. How can I make this go away? It kinda stays for couple of millinseconds before cauing mouseleave.

2. The mouseleave event sometimes does not fire... Happens occasionally, but it happens. I have to move my mouse on the #window div and move back (have to do it twice essentially)? Can anyone let me know why this happens and how i can handle?

Are there better solutions to do this other than using animate() in JQuery? Would be happy to all/any suggestions. I am trying to do a fly-out/slideIn effect with content inside a div.

Thank you very much for your help

Answer 1

Well i dont know that this will sove your stated problems but there are a number of things that are going to help your code overall. For example my first impression was:

"Ok hes using jquery... wait i thought he was using jquery... WTF?".

1. Why use getElementById? use $('#myid').
2. Why use style.visibility? use $(selector).css('visibility', value);
3. Don use the element attributes to bind events... use jquery $(selector).hover(openPopup, closePopup);

Ok with that out of the way are you when the mouseleave fails to fire are you sure the mouse left the area? I mean are you sure the div's dimensions are a little larger than you think? If that isnt the case it could simple be the time it takes to execute the function or it could be that it isnt done animating (ie. isDone = false). In my opinion rather than trying to detect whether some thing is done animating i would jsut call $(element).stop(true); to stop the animation at its endpoint, and then continue on with your other animation. That should be pretty failsafe. Also i believe if you call it with false or omit the argument entirely it will stop it exactly where it is... allowing you to activate your out animation from the current place without having to calculate position.

Additionally i dont know what this actually looks like but it may be that you dont even need to use animate you may be able to use one of the built in effects like slide or something - you might wan tto look in to those as well.

Answer 2

$(element).stop(true);

Thank YOU !!! that works. because Jquery animate was not done yet. causing a long delay.