3
\$\begingroup\$

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>
\$\endgroup\$
  • \$\begingroup\$ not the best example of coding best practises, but a nudge in the right direction would be grateful :) \$\endgroup\$ – Jimmybob Jun 4 '13 at 14:41
  • \$\begingroup\$ Maybe use each()? \$\endgroup\$ – fge Jun 4 '13 at 14:48
3
\$\begingroup\$

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.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.