More efficient jQuery scripting when manipulating multiple elements with multiple CSS attributes
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:

&lt;div id="logo1" class="fade-out"&gt;Logo 1&lt;/div&gt;
&lt;div id="logo2" class="fade-out"&gt;Logo 2&lt;/div&gt;
&lt;div id="upline" class="expand-x"&gt;Some text&lt;/div&gt;
&lt;style&gt;
    .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; }
&lt;/style&gt;

&lt;script&gt;
    $('.fade-out').addClass('animate');
    $('.expand-x').addClass('animate');
&lt;/script&gt;


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.