How create animation for showChar

Question

How create animation effect for "showChar" on this example: link

HTML

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Vestibulum 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.
    Integer varius egestas vestibulum.
    Nullam a dolor arcu, ac tempor elit. Donec.


    Duis nisl nibh, egestas at fermentum at, 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 elit. 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 et mauris elit. 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;
});

});

Answer 1

Try this:

$(".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

Answer 2

Add a duration in toggle():

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

In your example, see the result: http://jsfiddle.net/7QWzd/2/

toggle() jQuery reference: http://api.jquery.com/toggle/