Question

我正在努力让jQuery的slideDown()动画正常工作，但在我的情况下应该向下滑动的文本，只是出现 ..怎么做我让动画也出现了吗？

我也尝试手动指定速度，但最终结果是相同的。

HTML：

<section class="subscribe">
    <button id="submitBtn" type="submit">Subscribe</button>
    <p></p>
</section>

JavaScript的：

$(function () {
    $("#submitBtn").click(function (event) {
        $(".subscribe p").html("Thanks for your interest!").slideDown({
                        duration: 4000
                    });
    });
});

JSFiddle： http://jsfiddle.net/ahmadka/A2mmP/

Answer 1

输入文本并尝试向下滑动时，您的p元素已显示。所以不需要动画。

$(function () {
  $("#submitBtn").click(function (event) {
    $(".subscribe p").hide().html("Thanks for your interest!").slideDown(4000);
  });
});

Answer 2

您可以先隐藏内容，然后使用slideDown功能显示内容：

HTML

<section class="subscribe">
    <button id="submitBtn" type="submit">Subscribe</button>
    <p>Thanks for your interest!</p>
</section>

CSS

.subscribe p{
    display:none;
}

的jQuery

$(function () {
    $("#submitBtn").click(function (event) {
        $(".subscribe p").slideDown({duration: 400});
    });
});

活生生的例子：http://jsfiddle.net/A2mmP/2/

Answer 3

您修改后的代码

$(function () {
    $("#submitBtn").click(function (event) {
        $(".subscribe p").html("Thanks for your interest!").hide().slideDown('400');
    });
});

选中此demo

jQuery slideDown（）动画不起作用

3 个答案: