首先你能查看我的结果吗http://jsfiddle.net/RXnKR/
由此,我决定,当你点击更多按钮时,我希望它慢慢地动画化,并且不确定我是否可以改变它来实现这一点?我很乐意接受任何形式的推荐,并非常感谢:)
开始:http://jsfiddle.net/RXnKR/5/
请记住,在这种情况下,".morecontent span"必须具有持久的高度,否则在下一次运行时,如果高度发生了更改,那么部分文本可能会溢出其他元素,或者可能会有额外的空白。因此,如果高度发生变化,你必须重新计算。
不过,这不是一个问题,而且你得到了相当公平的反对票。我会在下次发布之前咨询faq。
另一个独奏,看起来更流畅;http://jsfiddle.net/RXnKR/6/
$('.more').each(function () {
var content = $(this).html();
var height = $(this).height();
$(this).data('fullheight', height);
if (content.length > showChar) {
var c = content.substr(0, showChar);
var h = content.substr(showChar - 1, content.length - showChar);
var html = c + '<span class="moreellipses">' + ellipsesText + ' </span><span class="morecontent"><span>' + h + '</span> <a href="" class="morelink">' + moretext + '</a></span>';
$(this).html(html);
var collapsedHeight = $(this).height();
$(this).data('smallheight', collapsedHeight);
}
});
$(".morelink").click(function () {
var parentMore = $(this).parents('.more');
var more = $(this);
if (more.hasClass("less")) {
parentMore.animate({
height: parentMore.data('smallheight')
}, 1000, function() {
more.removeClass("less");
more.html(moretext);
});
} else {
parentMore.animate({
height: parentMore.data('fullheight')
}, 1000, function() {
more.addClass("less");
more.html(lesstext);
});
}