slideDown(） 在 css 设置为 display:none 时不起作用

slideDown() not working when css is set to display:none

本文关键字：display none 不起作用 设置 css slideDown      更新时间：2023-09-26

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

我的小提琴在这里：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 在隐藏的跨度<跨度>上插入一个显示：内联块。但是，当我将代码更改为此代码时，slideDown 将停止一起工作。

任何人都可以为我提供解决方案吗？我试过幻灯片切换，但仍然没有运气。

谢谢。

好吧，问题是内联没有高度，因此很难对没有高度的元素进行动画处理。因此，与其对正在显示的内容进行动画处理，不如对父级进行动画处理

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>

好吧，您可以在幻灯片完成后将.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将否定高度动画的效果。（观察您的控制台，您将看到元素的高度动画，但在视觉上什么也不做。

相关文章：