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 回答