Question

Up until now i’ve been dropping all my jquery code right inside the document.ready function. I’m thinking that for certain situations this isnt the best way to go.

for example: If i want an animation to perform when a certain page loads what is the best way to go about that.

$(document).ready(function() {
    $("#element_1").fadeIn();
    $("#element_2").delay('100').fadeIn();
    $("#element_3").delay('200').fadeIn();
});

If this is right inside of document.ready then every time ANY page loads it’s going to check each line and look for that element. What is the best way to tell jquery to only perform a chunk of code on a certain page to avoid this issue.

Answer 1

by checking if elememt exist on the page before execute animation

if ($("#element-1").length) { 
   $("#element-1").fadeIn();
}

and so on with other elements #element_2 and #element_3

---

to @numediaweb:

current jQuery is() implementation is like below

is: function( selector ) {
  return !!selector && jQuery.filter( selector, this ).length > 0;
 },

so, it can be smarter to use is() but it is faster to use just length and even faster to sue document.getElementById().length