2

jQuery を使用した Firefox で固定位置の div をアニメーション化する際に問題があります。閉じるリンクをクリックすると画面から部分的に離れ、開くリンクをクリックすると元に戻るはずの 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; 
}

アイデアをありがとう！

4

1 に答える 1

3

問題を修正しました。アニメーション座標をフォーマットに変更してみました

-=121px

パーセントも使用しようとしましたが、どれも機能しませんでした。解決策は、位置ではなく余白をアニメーション化することです。そこで、CSS の #calc に行を追加しました

margin-right: 0px;

そして、このようにjQueryを変更しました

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

すべてのブラウザで完全に動作するようになりました。これが誰かを助けることを願っています。

于 2013-03-15T21:11:13.090 に答える