Jquery 动画扩展 table 单元格内容

Question

在 Razor 页面上，我有一条很长的评论，我想删掉。然后，我想在用户提示时显示完整评论。

在页面上，我有一个包含以下内容的 for 循环：

<td>
    @if (Model.ApprovedFacilities[i].Comment.Length > 100)
    {
        var comment = Model.ApprovedFacilities[i].Comment;
        <span id="DisplaySpan_@i">@comment.Substring(0, 100)...</span>
        <span style="display:none" id="InitialSpan_@i">@comment.Substring(0, 100)...</span>
        <span style="display:none" id="NextSpan_@i">@comment</span>
        <a id="@i" class="showbutton">Show</a>
    }
    else
    {
        <label>@Model.ApprovedFacilities[i].Comment</label>
    }
</td>

我遇到的问题是设置 jquery 动画以获得平滑的滑动 down/up 效果。目前我的 jquery 看起来像这样：

$(".showbutton").click(function () {

    var i = $(this).prop('id');
    if ($(this).html() == 'Show') {
        $("#DisplaySpan_" + i).animate({
            //'opacity': 0,
            'height': 'toggle'
        }, 400, function () {
            $(this).html($("#NextSpan_" + i).html()).animate({
                //'opacity': 1,
                'height': 'toggle'
            }, 400);
        });
        $(this).html("Hide");
    } else {
        $("#DisplaySpan_" + i).animate({
            //'opacity': 0,
            'height': 'toggle'
        }, 400, function () {
            $(this).html($("#InitialSpan_" + i).html()).animate({
                //'opacity': 1,
                'height': 'toggle'
            }, 400);
        });
        $(this).html("Show");
    }
});

这是什么原因导致点击按钮（现在是锚标记）元素的高度在达到扩展高度之前变为零。我在以下 fiddle:

中演示了这种行为

http://jsfiddle.net/ps7zw4yg/

Answer 1

试试这个脚本：

<script>
    $(function(){
        $(".showbutton").click(function () {
            var i = $(this).prop('id');
            if ($(this).html() == 'Show') {
                var h = $("#NextSpan_" + i).height() + 80;
                $("#DisplaySpan_" + i).animate({
                    'height': h + 'px'
                }, 2000, 'linear');
                $("#DisplaySpan_" + i).html($("#NextSpan_" + i).html());
                $(this).html("Hide");
            } else {
                var h = $("#InitialSpan_" + i).height();
                $("#DisplaySpan_" + i).animate({
                    'height': h + 'px'
                }, 2000, 'linear', function(){
                    $("#DisplaySpan_" + i).html($("#InitialSpan_" + i).html());
                });
                $(this).html("Show");
            }
        });
    });
    </script>

Jquery 动画扩展 table 单元格内容

Jquery animation to extend table cell contents

jquery

animation

razor

jquery-animate