当 css 设置为 display:none 时，slideDown() 不起作用

Question

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

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

你在我设置的js的第16行看到：

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

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

$(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>

Answer 2

好吧，您可以在幻灯片完成后将.next() 元素更改为display: inline ：

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

但这可能有点笨拙，因为它首先显示inline-block，然后突然切换到inline。如果不以block 或inline-block 开头，我真的看不到完成幻灯片动画的（简单）方法。也许尝试不同的动画？喜欢.fadeIn('slow')？

说明：

.slide()（及其变体）适用于元素height，而height 仅适用于block 类型的元素。在调用.slide() 后立即将元素更改为inline 将抵消高度动画的效果。 （观察你的控制台，你会看到元素的高度动画，但视觉上什么也没做。）