테이블 셀 내용을 확장하는 Jquery 애니메이션

Question

면도기 페이지에서 잘라 버리고 싶은 긴 주석이 있습니다. 그런 다음 사용자의 프롬프트에 전체 설명을 표시하려고합니다. 페이지에

나는 다음과 루프를 가지고 :

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