CODEWITHSUNDEEP
jquerydomjquery-animate
phunder
phunder

Reputation: 1713

Animating content newly added to the DOM

I am working on the front end of a web application. All of the content is generated from JSON objects that I receive from the back end. I then wrap this content in HTML and add it to the DOM. I do this using jQuery append(). Once the content is added I animate the old page out and the new page in.

My problem is that the content does not seem to finish loading before the animation starts. It also seems that not all of my CSS takes effect before the animation starts. It only shows once the animation is done.

I assumed that I need to check if the content is finished appending before I start animating. I know that append() is supposed to be synchronous, but is could not hurt to check.

Here is a code snippet to give you an idea of the animation involved. (note: this is not all of my code, only a bare minimum to give you an idea of what exactly I am doing)

$(mainTransitionContainer).append(newElement);
$(mainTransitionContainer).ready(function () {
   $(mainTransitionContainer).animate({ right: transitionWidth }, 2000,'easeInOutQuart'});
});

Is this the correct way to check if the content is finished loading?

Does anyone have another idea why my content is not showing correctly?

Is the jQuery animation perhaps effecting my CSS styles?

Does anyone have any advice? It would be very much appreciated.

Upvotes: 0

Views: 122

Answers (2)

phunder
phunder

Reputation: 1713

I have realized that I was making a mistake elsewhere. The issue has been resolved. The content is being added synchronously, and thus no event needs to be triggered when the content is done being appended.

Upvotes: 0

Flater
Flater

Reputation: 13773

Presumably, if you are loading data using JSON, you are using Ajax calls to retrieve the data?

You cannot really use the .ready() function here. This will be triggered when the page has loaded initially, regardless of any Ajax calls that could happen afterwards. It basically fires whenever the intended element idles (i.e. it has been changed, and the first moment the changes are complete and no code is run, the ready trigger will fire)

I don't know how your ajax call is structured as I see no snippet in your question, but this is a rough sketch of what you should to in order to maintain the 'load, write, then animate' structure you want:

$.ajax({

    url: "http://my.url.com",

    type: 'get', //I assume. It could be 'post' dependent on what the code behind does.

    cache: false, //for good measure. IE will never execute the same request twice, unless you put this in.

    success: function(data_in_json_form) {

        var data_in_html_form = .... //Do something with the received data_in_json_form. You need to end up with a string of valid html code.

        $(mainTransitionContainer).append(data_in_html_form);

        //Now you can do the animation.
        $(mainTransitionContainer).animate({ right: transitionWidth }, 2000,'easeInOutQuart'});

    }

});

The important things to remember are:

  • Any code that is not in the 'success' function will be executed without requiring the ajaxt call to have completed. Ajax works asynchronously, so the browser starts the ajax request, and then carries on without waiting for a response.
  • Append does work synchronously. However, when used in combination with Ajax calls, make sure to executes the code only in the 'success' function.
  • The .ready() trigger should really only be used for $(document).ready(). It might work in other scenarios, but it it almost never the right solution to a problem.

This is what I make of the issue you are describing. If I am missing something, please post more code, specifically of your JSON retrieval method and any code following it.

Upvotes: 1

Related Questions