jQuery slideDown() animation not working

Question

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 ?

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

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

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

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

Answer 2

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

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

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

Answer 3

Your modified code

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

Check this demo