jQuery animate position fixed inacurate in Firefox

Question

I'm having problem with animating div with fixed position in Firefox with jQuery. There is an div which is supposed to partly move away from the screen, when close link is clicked and to move back, when the open link is clicked. The animation works just fine in Chrome and Opera, but in Firefox it moves to a slightly different position. It's like the animation is incomplete. As the result the open and close links are invisible after the animation as they are still behind the browser window border.

Firefox version: 19.0.2 jQuery version: 1.9.1

jQuery code:

$(document).ready(function(){
    $("#calc_close").click(function(){
        $("#calc").animate({right:'-121px'});
        $("#calc_open").show();
        $("#calc_close").hide();
        $("#state").val("2");
        $.post('calc_state_update.php', $('#calc_op_form').serialize());
        });
    $("#calc_open").click(function(){
        $("#calc").animate({right:'0px'});
        $("#calc_open").hide();
        $("#calc_close").show();
        $("#state").val("1");
        $.post('calc_state_update.php', $('#calc_op_form').serialize());
        });
    });

HTML code:

<div id="calc" class="<?php if($calc == 1){ echo 'calc_opened'; } else { echo 'calc_hidden'; } ?>">
        <h4>Title</h4>
        <p>
            Some text in Czech :)           
        </p>
        <p>
            Click here...           
        </p>
        <div id="calc_open" class="<?php if($calc == 1){ echo 'calc_op_hidden'; } else{ echo 'calc_op_visible'; } ?>"><a href="#" title="Zobrazit okno">&laquo;</a></div>           
        <div id="calc_close" class="<?php if($calc == 1){ echo 'calc_op_visible'; } else{ echo 'calc_op_hidden'; } ?>"><a href="#" title="Skrýt okno">&raquo;</a></div>
    <form id="calc_op_form" method="POST" action="calc_state_update.php">
        <input type="hidden" name="state" id="state" value="1">
    </form>     
    </div>

And finally the CSS:

#calc
{
width: 109px;
height: 152px;
background-color: #fff;
background-image: url(./img/calc_bg.png);
background-repeat: repeat-y;
border: 1px #646161 solid;
border-left-color: #563928;
border-right: none;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
display: block;
top: 137px;
position: fixed;
padding: 0px 6px 0px 25px;
}
.calc_hidden
{
right: -121px;  
}
.calc_opened
{
right: 0px; 
}

Thanks a lot for any ideas!

Answer 1

I fixed the problem. I tried changing animation coords to format

-=121px

I also tried to use percents, none of it worked. The solution is to animate margin, instead of position. So I added a line to the #calc in the CSS

margin-right: 0px;

And changed the jQuery like this

 $("#calc").animate({marginRight:'-121px'});

Works perfectly now in all browser. I hope this will help someone.