JQuery slideDown () not working

Question

I am trying to get jQuery slideDown() animation to work, but in my case, text appears that should slide down. How do I make it display with animation in place?

I also tried to manually specify the speed, but the 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 text and try to shift it. Therefore, animation is not required.

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

Answer 2

You can do this by first hiding the content and then simply showing it using 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}); }); }); 

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

Answer 3

Modified code

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

Check out the demo.