Question

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

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

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

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

这样做是在文本＆＃34; id vim mo＆＃34;之间创建换行符。和＆＃34; dus electram＆＃34;。这些应该在同一条线上流动，即没有换行。使用show（），就像原始代码一样，工作得很好，但它很难看。我一直在寻找解决方案，并发现有人建议我将代码更改为：

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

原因是slideDown插入了一个显示：隐藏的＆lt; span＆gt;。但是，当我将代码更改为此时，slideDown将停止一起工作。

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

感谢。

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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 - 类型元素。调用inline后立即将元素更改为.slide()将取消高度动画的效果。（观察你的控制台，你会看到元素的高度动画，但在视觉上什么都不做。）

当css设置为display：none时，slideDown（）不起作用

2 个答案:

说明：