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”

希望这可以满足您的要求。

小提琴：http://jsfiddle.net/qs3VA/15/

动画textarea高度使文字震动？

1 个答案: