Jquery better in header or footer?

[RDesignista]

Hi,

I have some jquery triggers and I want to know if they run faster in my body (above </body) or in the head. Or is it faster to put it in a .js file and reference it? The triggers I'm adding are a bunch of on hover animations for my website. I tried searching for the answer on google, but could not find a definite answer.

Also, why is it that something like this can't be put in the header?

<script>
$("#wrap #content .entry-content .wp-caption").hover(
function() {
    $(this).find('div').stop().fadeTo("800",1);
    $(this).find('img').stop().fadeTo("800", .8);
},
function() {
    $(this).find('div').stop().fadeTo("200",0);
    $(this).find('img').stop().fadeTo("200", 1);
});
</script>

-R

[Ronald Roe]

It can be put in the header, it just has to come after your jQuery import.

To me, it really depends on what's going on. For instance, I just finished a site where I needed the width of the nav menu items to be recalculated based on how many there are. That way, if the owner added or removed items, they'd still take up a proportionate amount of space. The CSS defaults to 20%, obviously for 5 items. So, if I had put the script at the bottom of the HTML, you would see it at 20% until the DOM recalculated the styles after the browser downloaded and ran the script. None of that calculation would happen until everything else was downloaded and displayed already. On the other hand, putting it in the head makes sure it's downloading the script first and running it as soon as it can.

Point is, do whatever works for you at the time. Also, always call scripts from an external file. It makes for cleaner code, and a lighter HTML file. That'll reduce load time.

[RDesignista]

Ronald,

Thanks for the answers. I'm really wanting to know the most efficient ways to use jquery, because I've noticed that it can really slow down my browser (esp. in Firefox). Despite all the web work I've done, I still don't know a lot of basic things about Jquery. I can't even write an animate function without referencing the jquery website. Ugh. I will have to take a couple days to devote strictly to jquery education.

-R

[Ronald Roe]

If you don't already, it'd be better to spend time learning regular Javascript. It'll help you understand a lot more of what's going on with the jQuery