阅读更多动画/过渡

Question

好的，所以我知道有一个非常简单的解决方案，但我现在没有想法。我使用脚本在div 的高度从 118 像素增加时添加一个"阅读更多"按钮。我使用了这个 JSFiddle 示例，现在我需要添加一个简单的向下滑动和向上滑动动画。有人可以指导我如何完成此操作吗？

JSFIDDLE 示例

JS的

if(curHeight==118) {
  $('#readmore').show();
} else {
  $('#readmore').hide();
}
// Find Div Height    
function changeheight() {
  var lang = jQuery('html')[0].lang;
  if ( lang == 'nl-NL' ) {
    var more_text = 'Lees meer';
    var less_text = 'Lees minder';
  } else if (lang == 'en-US' ) {
    var more_text = 'Read more';
    var less_text = 'Read less';
  }
  var readmore = jQuery('#readmore');
  if (readmore.text() == more_text) {
      jQuery('.readmore_link').addClass("show_less");
      jQuery('.readmore_link').removeClass("show_more");
      readmore.text(less_text);
  } else {
      jQuery('.readmore_link').addClass("show_more");
      jQuery('.readmore_link').removeClass("show_less");
      readmore.text(more_text);
  }    
  // fade out read-more
  jQuery('.rm_height').toggleClass("heightAuto");      

};

Answer 1

你可以做类似的事情：

$(function(){
     var curHeight = $('.text').height();     
     if(curHeight==38) {
        $('#readmore').show();
    } 
    else {
        $('#readmore').hide();
    }
});     
function changeheight() {
    var readmore = $('#readmore');
    if (readmore.text() == 'Read more') {
        readmore.text("Read less");
        $("#textbody").animate({maxHeight : '80px', height : '80px'},"slow");
    } else {
        readmore.text("Read more");
        $("#textbody").animate({maxHeight : '38px', height: '38px'},"slow");
    }           
};

现在，请注意我做了一些更改：

1. 我正在制作最大 80 到 38 像素高的动画。您可能希望根据特定的文本块微调这些值。
2. 我使用了 animate，它包含一个额外的速度参数。如果您想更好地控制效果，也可以将其更改为秒 int 值。

请参阅此处的 JSFiddle：http://jsfiddle.net/gqb8gsn4/1/

Answer 2

如果你在 jquery-ui 库中采购，你可以添加你想要为 toggleClass 函数花费的时间（以毫秒为单位）作为第二个参数。

.toggleClass("heightAuto", 1000);   

https://jqueryui.com/toggleClass/

另外，查看您可以使用（控制动画）作为第三个参数的缓动：

.toggleClass("heightAuto", 1000, "easeOutSine" );   

http://api.jqueryui.com/easings/