jQuery 动画位置在 Firefox 中固定不准确

Posted 2023-05-08

【中文标题】jQuery 动画位置在 Firefox 中固定不准确

【英文标题】：jQuery animate position fixed inacurate in Firefox

【发布时间】：2013-03-03 10:02:14

【问题描述】：

我在使用 jQuery 为 Firefox 中固定位置的 div 设置动画时遇到问题。 有一个 div 应该在单击关闭链接时部分远离屏幕，并在单击打开链接时向后移动。 动画在 Chrome 和 Opera 中运行良好，但在 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; 

非常感谢您的任何想法！

【参考方案1】：

我解决了这个问题。我尝试将动画坐标更改为格式

-=121px

我也尝试过使用百分比，但都不起作用。 解决方案是动画边距，而不是位置。 所以我在 CSS 中的#calc 中添加了一行

margin-right: 0px;

并像这样更改了 jQuery

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

现在可以在所有浏览器中完美运行。我希望这会对某人有所帮助。

【讨论】：

救命稻草！有一个非常相似的问题。不确定这个错误是否与最新的 jQuery 或 Firefox 相关 - 尚未测试。

是的。非常感谢！