Mover div con javascript

[Pimager]

Hola,
Tengo una capa en la que hay diversos tags en el interior. La idea es que cuando me ponga encioma de la capa, esta se desplace X píxeles a la izquierda y en cuanto salgo de encima del div, vuelva a su posición original. El problema es que si pongo los eventos "onmouseover" y "onmouseout" en el div, se pasa todo el rato detectando over, out, over, out, ...
Alguien sabe como puedo solucionarlo?
El código que tengo es tal que el siguiente

Código HTML:

<div id="mainDiv" style="z-index:0;display: block;top: 161px;text-align: left;z-index: 3141591;overflow: hidden;position: fixed;" onmouseover="javascript:onMouseOver();">
   <table border="0 none" style="width:136px;" cellspacing="0" cellpadding="0">
      <tr>
         <td style="width:36px; border:0 none; padding: 0px 0px 0px 0px !important;">
            <img id="LineImage" src="http://localhost/images/img.png" style="border-width:0px;" />
         </td>
         <td style="width:100px;background-color:#2e2e2e; padding:0px 10px 4px 5px !important;">
            <span id="lblSuccess" style="color:Green;font-size:8pt;display:none;"></span>
            <div class="clear" />
            <input name="txtName" type="text" id="txtName" placeholder="Nombre" style="width:100px;display:block;" />
            <div class="clear" />
            <span id="lblChooseContactType" style="color:White;font-size:8pt;display:block;">Contácteme por:</span>
            <div class="clear" />
            <input name="txtPhone" type="text" id="txtPhone" placeholder="Teléfono" style="width:100px;display:block;" />
            <div class="clear" />
            <input name="txtEmail" type="text" id="txtEmail" placeholder="Email" style="width:100px;display:block;" />
            <div class="clear" />
            <input type="image" name="ImageButton1" id="ImageButton1" src="http://localhost/images/button.png" onclick="javascript:return CheckData();" style="border-width:0px;float:right;width:24px;" />
         </td>
      </tr>
   </table>
</div> 

Código:

$(document).ready(function () {
        setServiceAgentButtonPosition();
    });
    $(window).resize(function () {
        setServiceAgentButtonPosition();
    });
    function onMouseOver() {
        var windowWidth = $(window).width();
        var mainDivWidth = $("#mainDiv").width();
        var mainDivPosition = (windowWidth - mainDivWidth) + "px";
        $("#mainDiv").animate({ left: mainDivPosition }, 500);
    }
    function onMouseOut() {
        var windowWidth = $(window).width();
        var mainDivWidth = $("#mainDiv").width();
        var mainDivPosition = (windowWidth - 36) + "px";
        $("#mainDiv").animate({ left: mainDivPosition }, 500);
    }
    function setServiceAgentButtonPosition() {
        var windowWidth = $(window).width();
        var mainDivWidth = $("#mainDiv").width();
        var mainDivPosition = windowWidth - 36;
        $("#mainDiv").css("left", mainDivPosition + "px");
    }

Alguna idea?

Muchas gracias