Question

我发现这个内容展开/折叠jQuery插件。我想点击EXPAND按钮时为这个插件添加淡入效果。

我该怎么做？

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

}）;

Answer 1

在link.click函数中

，你可以做到

text.animate({ opacity: 1.00 }, 600);

我认为它会追溯到text.css（'height'，'auto'）;在else块中。你可能不得不在if块中以某种方式将不透明度重置为0。

供参考：http://api.jquery.com/animate/

编辑：更好，http://api.jquery.com/fadeIn/

所以

text.fadeIn();

单击此脚本上的展开时，如何添加淡入效果？

1 个答案: