JQuery анимация для увеличения содержимого ячейки таблицы

Question

На странице Razor у меня есть длинный комментарий, который я хочу отрубить. Затем я хочу показать полный комментарий по запросу пользователя.

На странице у меня есть цикл с нижеследующим:

<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 анимации, чтобы иметь плавное скольжение вниз/вверх эффект. В настоящее время мой 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"); 
    } 
}); 

Что это вызывает на щелчке кнопки (якорь тегов прямо сейчас) высоту элемента идти к нулю, прежде чем идти к расширенной высоте. Я продемонстрировал это поведение в следующей скрипке:

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>