如何为 showChar 创建动画答案

【问题标题】：How create animation for showChar如何为 showChar 创建动画
【发布时间】：2014-05-19 22:13:50
【问题描述】：

如何在本例中为“showChar”创建动画效果：链接

HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit。前庭 laoreet，nunc eget laoreet sagittis， quam ligula sodales orci，congue imperdiet eros tortor ac lectus。 Duis eget nisl orci。 Aliquam mattis purus non mauris blandit id luctus felis convallis。整数 varius egestas 前庭。 Nullam a dolor arcu, ac tempor elit。多奈克。 Duis nisl nibh，在发酵的 gestas，viverra et purus。 Maecenas lobortis odio id sapien facilisis elementum。 Curabitur et magna justo, et gravida augue。 Sed tristique pellentesque arcu quis tempor。 consectetur adipiscing 精英。 Proin blandit nunc sed sem dictum id feugiat quam blandit。 Donec nec sem sed arcu interdum commodo ac ac diam。 Donec consequat semper rutrum。前庭和毛里斯精英。 Vestibulum mauris lacus, ultricies。

jQuery

$(document).ready(function() {
var showChar = 150;
var ellipsestext = "...";
var moretext = "+";
var lesstext = "-";
$('.more').each(function() {
    var content = $(this).html();

    if(content.length > showChar) {

        var c = content.substr(0, showChar);
        var h = content.substr(showChar-1, content.length - showChar);

        var html = c + '<span class="moreelipses">'+ellipsestext+'</span>&nbsp;<span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">'+moretext+'</a></span>';

        $(this).html(html);
    }

});

$(".morelink").click(function(){
    if($(this).hasClass("less")) {
        $(this).removeClass("less");
        $(this).html(moretext);
    } else {
        $(this).addClass("less");
        $(this).html(lesstext);
    }
    $(this).parent().prev().toggle();
    $(this).prev().toggle();
    return false;
});

});

【问题讨论】：

你有什么问题？
如何制作动画效果jsfiddle.net/7QWzd

标签： jquery jquery-animate toggle

【解决方案1】：

试试这个：

$(".morelink").click(function(){
    // find the initial comment height
    var $comment = $(this).parents('.comment');
    var initial_height = $comment.height();

    if($(this).hasClass("less")) {
        $(this).removeClass("less");
        $(this).html(moretext);
    } else {
        $(this).addClass("less");
        $(this).html(lesstext);
    }
    $(this).parent().prev().toggle();
    $(this).prev().toggle();

    // remove the set height
    $comment.removeAttr('style');
    var end_height = $comment.height();
    // set the current height to the initial height and then animate it to the height after the resulting class change
    $comment.css('height', initial_height).animate({height: end_height}, 500);

    return false;
});

Fiddle

【讨论】：

【解决方案2】：

在toggle()中添加持续时间：

$(this).parent().prev().toggle(400);

在您的示例中，查看结果：http://jsfiddle.net/7QWzd/2/

toggle() jQuery 参考：http://api.jquery.com/toggle/

【讨论】：