More efficient jQuery scripting when manipulating multiple elements with multiple CSS attributes

Question

I'm relatively new to JavaScript and jQuery so go easy on me. I'm creating a website where upon jQuery document.ready a set of basic animations are performed on different divs on the HTML markup. All divs have separate IDs and I am storing all divs with same CSS property change in the same variable. Using these variables I run the function after. This code works fine but what would be a more effective manner of writing it?

<script src="jquery-1.8.3.js" type="text/javascript" ></script>
<script type="text/javascript">
 $(document).ready(function() { 
 function fader(){ 
 var logofade = $('#portlogo, #toolslogo, #contactlogo, #portfoliolblw, #toolslblw, #contactlblw'),
 homefade = $('#homelogo'),
 homeline = $('#hline'),
 uline = $('#upline'),
 acrossline = $('#acrossline'),
 glow = $('#logoglow');
 logofade.fadeOut(0)
 homefade.fadeOut(0).delay(300).fadeIn(100)
 homeline.delay(100).animate({'width': '150px'}, 100)
 uline.delay(200).animate({'height': '41px', 'top':'-30px'}, 100)
 acrossline.delay(300).animate({'width': '825px'}, 100)
 glow.fadeOut(0).delay(600).fadeIn(600);
 }
 fader()
 });
 function logochange() { $('#homelogo').delay(300).fadeIn(100);} 
 function logochange1() { $('#portlogo, #toolslogo, #contactlogo').fadeOut(100);}
 function logochange2() { $('#portlogo').delay(300).fadeIn(100);}
 function logochange3() { $('#toolslogo, #homelogo, #contactlogo').fadeOut(100);}
 function logochange4() { $('#toolslogo').delay(300).fadeIn(100);}
 function logochange5() { $('#portlogo, #homelogo, #contactlogo').fadeOut(100);}
 function logochange6() { $('#contactlogo').delay(300).fadeIn(100);}
 function logochange7() { $('#portlogo, #homelogo, #toolslogo').fadeOut(100);}
 function homebtn() { $('#homelblw').fadeIn(0);}
 function homebtn1() { $('#homelblw').fadeOut(0);}
 function portbtn() { $('#portfoliolblw').fadeIn(0);}
 function portbtn1() { $('#portfoliolblw').fadeOut(0);}
 function toolsbtn() { $('#toolslblw').fadeIn(0);}
 function toolsbtn1() { $('#toolslblw').fadeOut(0);}
 function contactbtn() { $('#contactlblw').fadeIn(0);}
 function contactbtn1() { $('#contactlblw').fadeOut(0);}
 function hline1() {$('#hline').animate({'width': '150px'}, 100);}
 function hline2() {$('#hline').animate({'width': '0px'}, 100);}
 function pline1() {$('#pline').animate({'width': '150px'}, 100);}
 function pline2() {$('#pline').animate({'width': '0px'}, 100);}
 function tline1() {$('#tline').animate({'width': '150px'}, 100);}
 function tline2() {$('#tline').animate({'width': '0px'}, 100);}
 function cline1() {$('#cline').animate({'width': '150px'}, 100);}
 function cline2() {$('#cline').animate({'width': '0px'}, 100);}
 function upline1() {
 $('#upline').animate({
 'height': '-41px', 'top':'0px'
 }, 0).delay(100).animate({
 'height': '41px', 'top':'-30px'
 }, 100);
 }
 function acrossline1() {
 $('#acrossline').animate({
 'width': '0px'
 }, 0).delay(200).animate({
 'width': '825px'
 }, 100);
 }
</script>

• Jimmybob: not the best example of coding best practises, but a nudge in the right direction would be grateful :)
• fge: Maybe use each()?

Answer 1

I would say two things could improve this considerably:

1. Use CSS classes elements that share the same animations. This way you can just fetch all the elements that need to be animated with a single $(). e.g. $('.animate')
2. Instead of using jQuery's animation methods, use CSS transitions. This will make your code simpler, and you know you're using the browser's native animation rendering.

Here's an example:

<div id="logo1" class="fade-out">Logo 1</div>
<div id="logo2" class="fade-out">Logo 2</div>
<div id="upline" class="expand-x">Some text</div>
<style>
 .fade-out {
 opacity: 1.0;
 transition: opacity 0 .2s;
 }
 .fade-out.animate { opacity: 0; }
 .expand-x { 
 width: 100px;
 transition: width .1s .2s;
 }
 .expand-x.animate { width: 200px; }
</style>
<script>
 $('.fade-out').addClass('animate');
 $('.expand-x').addClass('animate');
</script>

You could simplify this even further by using a single CSS class for all elements that need animating. e.g. $('.needs-animation').addClass('animate');

Also, if there are any animations that are triggered by mousehover, you could do all the animation in CSS with the :hover pseudo-selector.

Finally, make sure the CSS transitions you use are compatible with all the browsers you're supporting.