jQuery одинарная позиция фиксированная inacurate в Firefox

Question

У меня проблема с анимацией div с фиксированной позицией в Firefox с помощью jQuery. Существует div, который, как предполагается, частично удаляется от экрана, при нажатии на ссылку и перемещение назад, когда нажимается открытая ссылка. Анимация прекрасно работает в Chrome и Opera, но в Firefox она перемещается в несколько другую позицию. Это похоже на то, что анимация неполна. В результате открытые и закрытые ссылки невидимы после анимации, поскольку они все еще находятся за границей окна браузера. версия

Firefox: 19.0.2 JQuery версия: 1.9.1

JQuery код:

$(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 код:

<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> 

И, наконец, 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; 
} 

Большое спасибо за любые идеи!

Answer 1

Устранена проблема. Я попытался изменить анимационные коорды в формате

-=121px 

Я также пытался использовать проценты, ни одна из них не работала. Решение заключается в анимировании поля, а не позиции. Так что я добавил строку в #calc в CSS

margin-right: 0px; 

И изменил JQuery, как этого

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

теперь работает во всех браузере. Надеюсь, это поможет кому-то.