CODEWITHSUNDEEP
jqueryjquery-animatetoggle
Dan Iurcu
Dan Iurcu

Reputation: 29

How create animation for showChar

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

});

Upvotes: 1

Views: 248

Answers (2)

Dan-Nolan
Dan-Nolan

Reputation: 6657

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

Upvotes: 1

Alcalyn
Alcalyn

Reputation: 1589

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/

Upvotes: 1

Related Questions