在Firefox中固定不動的jQuery動畫位置

我在使用jQuery在Firefox中固定位置動畫div時出現問題。當打開鏈接被點擊時，有一個應該部分離開屏幕的div，當單擊關閉鏈接並向後移動時。 Chrome和Opera中的動畫效果很好，但在Firefox中，它的位置略有不同。這就像動畫不完整。結果，打開和關閉鏈接在動畫之後是不可見的，因爲它們仍然位於瀏覽器窗口邊界之後。在Firefox中固定不動的jQuery動畫位置

火狐版本：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; 
}

非常感謝您的任何想法！

來源

2013-03-14 user2171496

我解決了這個問題。我試圖改變動畫座標格式

-=121px

我也嘗試使用百分比，它們都沒有工作。解決方案是動畫邊距，而不是位置。所以我添加了一行到#calc在CSS

margin-right: 0px;

而在所有的瀏覽器改變了jQuery這樣

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

完美的作品了。我希望這會幫助某人。

來源

2013-03-15 21:11:13 user2171496

Lifesaver！有一個非常類似的問題。不確定這個bug是否與最新的jQuery或Firefox相關 - 尚未測試。 – luke 2013-03-18 03:34:35

是的。非常感謝你！ – phillyslick 2013-05-29 01:29:29

在Firefox中固定不動的jQuery動畫位置

回答

相關問題