Jquery animation not working properly on first run

Question

this is code: jsfiddle code . In the first run, it does not show the "slideDown" animation, but in subsequent moments it works fine.

$("#more-news") .click(function() { $(".news-hide") .slideDown('slow').removeClass("hide"); }); 

Answer 1

Use the following.

 $("#more-news").click(function() { //changed the line below. $(".news-hide").hide().removeClass('hide').slideDown('slow'); $("#less-news").fadeIn('slow').removeClass("hide"); $("#more-news").fadeOut().addClass("hide"); }); 

Demo

Answer 2

Instead of using multiple elements and multiple events, you can use this,

 $("#more-news").click(function() { var button = $(this) $(".news-hide").slideToggle(function() { $(".news-hide").is(":visible") ? button.text("Less News") : button.text("More News") }); }); 

Fiddle

Answer 3

The bootstrap hide class does not work like the jQuery hide function, creating a confusing result.

To jQeuerify your hidden thangs, before you move them around, you can do something like this:

 $('.hide').hide().removeClass('hide'); $("#more-news") .click(function() { $(".news-hide") .slideDown('slow'); }); 

Now you do not need to worry about this hide class every time you do something, but it hides everything until the document is ready for javascript itself.