jQuery slideDown() 动画不起作用

jQuery slideDown() animation not working

提问by Ahmad

I'm trying to get jQuery's slideDown()animation to work, but in my case the text that should slide down, just appears.. How do I make it appear with the animation in place too ?

我试图让 jQuery 的slideDown()动画工作，但在我的情况下，应该向下滑动的文本只是出现..我如何让它在动画就位的情况下出现？

I tried manually specifying the speed too, but end result was the same.

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

HTML:

HTML：

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

JavaScript:

JavaScript：

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

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

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

回答by fehnomenal

Your pelement is already displayed when you enter the text and try to slide it down. So no animation is needed.

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

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

回答by Alvaro

You can do it having the content hidden at first and then just showing it with the slideDownfunction:

你可以先隐藏内容，然后用slideDown函数显示它：

HTML

HTML

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

CSS

CSS

.subscribe p{
    display:none;
}

jQuery

jQuery

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

Living example: http://jsfiddle.net/A2mmP/2/

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

回答by Chirag Vidani

Your modified code

您修改后的代码

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

Check this demo

检查这个演示