Question

我无法弄清楚为什么下面的幻灯片不会慢。请注意，div是内联的。

<span id="readMoreLink" style="display: inline"><a style="color: #213d92" class="textlink" id="readMore "href="#"> ...Read More</a></span>
<div id="bioText" style="display: inline">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </div>

$('#readMore').click(function (e) {             
    $('#bioText').slideDown(1000);
    $('#readMoreLink').hide();
    e.preventDefault();
});

注意：如果它删除显示：内联它工作正常。它是显示：内联导致问题。我需要内联显示。不知道怎么解决这个问题。

Answer 1

你在找这个吗？

$('#readMore').click(function (e) {
    $('#bioText').slideToggle(1000);
    $('#readMoreLink').hide();
    e.preventDefault();
});

fiddle

Answer 2

我不知道这是否是您问题的解决方案，但请注意，在您的问题的示例代码中，您的代码的ID属性上有额外的空格：

id="readMore " 

<a style="color: #213d92" class="textlink" id="readMore "href="#">

收盘前还有一个额外的空格。

您的jQuery代码不会重现该空间，因此ID的名称不同。

$('#readMore').click(function (e) {

您的代码可以使用已修复的代码：jsFiddle demo

Jquery slideDown未按预期工作

2 个答案: