2

ボタンのクリックで高さと行が増えるようにテキスト領域をアニメーション化しました。ただし、アニメーション中にテキスト領域のテキストが上下に揺れ、アニメーションが終了すると少し上に移動します。どうすればこれを止めることができますか?

これが私のコードです：

ありがとう ：）

function morespace(){
var thetxt = document.getElementById('more').value;
var box = document.forms["myForm"]["comment"];
if(box.rows == 3)
{
    $("#emailme").fadeOut(200);
    $('#comment').animate({'height': '+=235'},400,"swing");
    box.rows = 17;
    document.getElementById('more').innerHTML = "less space?";
}
else
{
    $('#comment').animate({'height': '-=235'},400,"swing");
    $("#emailme").fadeIn(800);
    box.rows = 3;
    document.getElementById('more').innerHTML = "more space?";
}}

<a href="javascript:morespace();" id="more">more space?</a>

更新: jsfiddle を要求します。私は jsfiddle を提供します ^_^ http://jsfiddle.net/qs3VA/4/

4

1 に答える 1

2

問題は、小数点以下の高さがちらつきを引き起こすことです。変更するピクセルの量に等しい時間、またはその倍数（高さが常に整数になるように）の線形成長を使用するように変更しました。

function morespace()
{
    var thetxt = document.getElementById('more').value;
    var box = document.forms["myForm"]["comment"];
    if(box.rows == 3)
    {
        $("#emailme").fadeOut(200);
        $('#comment').animate({'height': '+=235'},235,"linear");
        box.rows = 17;
        document.getElementById('more').innerHTML = "less space?";
    }
    else
    {
        $('#comment').animate({'height': '-=235'},470,"linear");
        $("#emailme").fadeIn(800);
        box.rows = 3;
        document.getElementById('more').innerHTML = "more space?";
    }
}​

jQueryに「x.12343654234」の高さを割り当てないように強制しています

うまくいけば、これはあなたの要件に受け入れられます。

フィドル： http： //jsfiddle.net/qs3VA/15/

于 2012-11-01T19:17:44.220 に答える