Question

Specifically, I have a JQuery template, and I am using .tmpl to append it to a div. My code is:

$("#" + this.templateID).tmpl({ results: resultsArray }).appendTo("#" + this.targetID);

This whacks my template at the end of the div. However, I want to fade it in. I don’t want to create an extra div on the page.

Ideally what I’d like to do is add the templated data to the page, and select the outermost element and set it to display none so it appears invisibly. Then tell it to fade in, so the resulting markup matches the other items already on the page seamlessly.

Any ideas how to do this?

Answer 1

Add first .hide() to it and the use .fadeIn() after appending it.

Thus:

$("#" + this.templateID)
    .tmpl({ results: resultsArray })
    .hide()
    .appendTo("#" + this.targetID)
    .fadeIn();