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>

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.