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.
jQuery one() Method The one() method attaches one or more event handlers for the selected elements, and specifies a function to run when the event occurs. When using the one() method, the event handler function is only run ONCE for each element.
jQuery can be several times slower than CSS when talking about animations. CSS animations and transitions have the advantage of being hardware accelerated by the GPU, which is really good in moving pixels.
$ is another, which is just an alias to jQuery . $$ is not provided by jQuery. It's provided by other libraries, such as Mootools or Prototype.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With