jquery - 动画文本区域高度使文本抖动？

Question

我对文本区域进行了动画处理，以在单击按钮时增加高度和行数。然而，在动画播放过程中，文本区域的文本会上下抖动，动画完成后，它会向上移动一点。我怎样才能阻止这个？

这是我的代码:

谢谢:)

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/

Answer 1

问题是小数高度会导致闪烁。我将其更改为使用线性增长，时间等于要更改的像素量或其倍数(以便高度始终是整数)。

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”的高度

希望这能够满足您的要求。

fiddle :http://jsfiddle.net/qs3VA/15/