Search code examples
javascriptjqueryhtmlslidedown

jQuery slideDown() animation not working

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/

Solution

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