How do I add fade in effect when I click expand on this script?

Posted by kohei on Stack Overflow See other posts from Stack Overflow or by kohei
Published on 2010-04-17T05:03:28Z Indexed on 2010/04/17 5:13 UTC
Read the original article Hit count: 284

Filed under:
|

Hi,

I found this content expand/collapse jQuery plugin. I want to add fade-in effect to this plugin when I click on the EXPAND button.

How do I do this?

$(document).ready(function () {
var maxlines = 15;
var lineheight = 15; // line height in 'px'
var maxheight = (maxlines * lineheight);
var allowedExtraLines = 3;
var showText = "EXPAND";
var hideText = "CLOSE";
$('.ranking').each(function () {
    var text = $(this);
    if (text.height() > maxheight + allowedExtraLines * lineheight) {
        text.css({ 'overflow': 'hidden', 'line-height': lineheight + 'px', 'height': maxheight + 'px' });
        var link = $('<a href="#">' + showText + '</a>');
        link.click(function (event) {
            event.preventDefault();
            if (text.css('height') == 'auto') {
                $(this).html(showText);
                text.css('height', maxheight + 'px');
            } else {
                //$(this).remove();
                $(this).html(hideText);
                text.css('height', 'auto');
            }
        });
        var linkDiv = $('<div></div>');
        linkDiv.append(link);
        $(this).after(linkDiv);
    }
});

});

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about JavaScript