javascript - 当CSS设置为display时，slideDown()不起作用:无

我已经使用https://stackoverflow.com/a/11417877/3842368，现在我试图对其进行修改，以使隐藏的文本通过slideDown（）而不是show（）出现。

我的小提琴在这里：http://jsfiddle.net/LukeMcLachlan/h0gx2fpj/

您会在我设置的js的第16行上看到：

$(this).next().slideDown("slow");

这是在文本“ id vim mo”和“ duslectram”之间创建一个换行符。这些应该改为在同一行上流动，即没有换行符。就像原始代码一样，使用show（）可以正常工作，但是很丑陋。我一直在寻找解决方案，发现有人建议我将代码更改为：

$(this).next().slideDown("slow").css("display", "inline");

原因是slideDown在隐藏的上插入display：inline-block。但是，当我将代码更改为此时，slideDown停止一起工作。

谁能为我提供解决方案？我尝试过slideToggle，但仍然没有运气。

谢谢。

最佳答案

好吧，问题是内联没有高度，因此很难为没有高度的元素设置动画。因此，除了对显示的内容进行动画处理之外，还可以对父级进行动画处理

var minimized_elements = $('p.minimize');

minimized_elements.each(function () {
    var t = $(this).text();
    if (t.length < 325) return;

    $(this).html(
    t.slice(0, 325) + '<span class="elip">... </span><a href="#" class="more">more</a>' +
        '<span class="overflow" style="display:none;">' + t.slice(325, t.length) + ' <a href="#" class="less">less</a></span>');

});

$('a.more', minimized_elements).click(function (event) {
    event.preventDefault();
    var anchor = $(this);
    var para = anchor.closest(".minimize");  //the parent wrapper

    para.find(".elip, .more").hide();
    para.find(".less").show();

    var currentHeight = para.height();
    para.data("height", currentHeight);


    para.height(para.height()).css("overflow","hidden");  //set the parent height and set overflow to hidden
    para.find(".overflow").css("display","inline");  //show the hidden text (really should have a class)
    para.animate({  //use animate instead of slide down, use the scrollHeight to know where to stop
        height : para[0].scrollHeight
    }, 500, "swing", function() {
        para.height("auto");  //reset height when done
    });
});

$('a.less', minimized_elements).click(function (event) {

    event.preventDefault();
    var anchor = $(this);
    var para = anchor.closest(".minimize");  //the parent wrapper

    para.find(".less").hide();



    para.animate({  //use animate instead of slide down, use the scrollHeight to know where to stop
        height : para.data("height"),
    }, 500, "swing", function() {
        para.find(".overflow").hide();
        para.find(".elip, .more").show();
        para.height("auto");  //reset height when done
    });



});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="minimize">Lorem ipsum dolor sit amet, justo laoreet eu qui. Iudicabit torquatos cu sit, at prompta fastidii fabellas mei. Cum laudem meliore reformidans cu, quas verear fabellas sed at. Et wisi invidunt apeirian nec, te tota altera postulant mea, mel ne possim omnesque. Meis molestie patrioque sea in, vero gubergren sed eu, id vim modus electram. Mei aeque omittam instructior ei. Lorem ipsum dolor sit amet, justo laoreet eu qui. Iudicabit torquatos cu sit, at prompta fastidii fabellas mei. Cum laudem meliore reformidans cu, quas verear fabellas sed at. Et wisi invidunt apeirian nec, te tota altera postulant mea, mel ne possim omnesque. Meis molestie patrioque sea in, vero gubergren sed eu, id vim modus electram. Mei aeque omittam instructior ei.</p>

关于javascript - 当CSS设置为display时，slideDown()不起作用:无，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27708278/