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

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?

```

$(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);}
func

I would say two things could improve this considerably:

• 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')

• 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:

Logo 1
Logo 2
Some text

    .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; }

    $('.fade-out').addClass('animate');
    $('.expand-x').addClass('animate');

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.

StackExchange Code Review Q#26984, answer score: 3