Question

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

JSFIDDLE EXAMPLE

THE 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");
    }           
};

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

我的动画效果最高为80到38像素。您可能希望根据特定的文本块微调这些值。
我使用了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/

阅读更多动画/过渡

2 个答案: