javascript - Animate 阅读更多/更少 JQuery

Question

我想在我们阅读更多/更少的代码中添加一个动画。 这样就顺利打开了。

我的 JQuery 代码目前是:

$(document).ready(function(){
    $('.service-info').hide();
      $('.read-more').click(function(){
            $(this).siblings('.service-info').show();
            $(this).hide();
            $(this).parent().find('.read-less').show();
        })
      $('.read-less').click(function(){
        $(this).siblings('.service-info').hide();
        $(this).hide();
        $(this).parent().find('.read-more').show();
      })
  });

JSFiddle:https://jsfiddle.net/2bdto5fb/

我怎样才能做到这一点？

Answer 1

使用slideDown()和 slideUp()喜欢以下。

$(document).ready(function () {
    $('.service-info').hide();
    $('.read-more').click(function () {
        $(this).siblings('.service-info').slideDown('slow');
        $(this).hide();
        $(this).parent().find('.read-less').show();
    })
    $('.read-less').click(function () {
        $(this).siblings('.service-info').slideUp('slow');
        $(this).hide();
        $(this).parent().find('.read-more').show();
    })
});

UPDATED FIDDLE