javascript - 当 css 设置为显示 :none 时，slideDown() 不起作用

Question

我拍了https://stackoverflow.com/a/11417877/3842368我现在正在尝试修改它，以便通过 slideDown() 而不是 show() 显示隐藏文本。

我的 fiddle 在这里: http://jsfiddle.net/LukeMcLachlan/h0gx2fpj/

你看我设置的js第16行:

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

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

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

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

谁能给我一个解决方案？我已经尝试过 slideToggle，但仍然没有成功。

谢谢。

Answer 1

好吧，问题是内联没有高度，所以很难为没有高度的元素设置动画。因此，不要为您显示的内容设置动画，而是为父级设置动画

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>