jquery ajax with slideDown not working on first click

Question

I am using ajax to grab two pieces of text from a seperate script with jQuery. I have done the check and the script correctly sends the infomation to the original php page.

I have a div container that holds the

tags with the text in them. These <p> tags have a class name of summary_text.

<p class='fight_summary_text'>a random piece of text</p>

The first <p> tag is populated with information when the php page loads. When a button is clicked, the jQuery is fired off and two more pieces of information should follow:

$(".summary_text:first").before(data.message_one).slideDown(750, function() {
    $(".summary_text:first").before(data.message_two).slideDown(750);
});

The problem I am having is that the first piece of information is inserted correctly on the page. It slides down and works fine, but the second piece of information does not appear.

However, that alone is not the problem. If I click the button a second time, both pieces of text appear correctly one after the other.

Does anyone know what is causing this? As I can't seem to locate the problem as it works when the button is clicked a 2nd, 3rd, 4th time etc.

Answer 1

I'm not sure if i understood your requirements correctly, but I tried and put together a fiddle. The problem I saw was the order of the statements.