Is there a shorthand way or easier way to do this?

Question

I am trying to make lots of animations with jQuery on a few pages and i am wondering how to do this in an easier way because this takes far to long and has to much room for error in the time frame i have to get it done.

$( document )
    .ready( fade1 );
function fade1(){
    $("#fade")
        .delay(1000)
        .fadeIn(1000, fade2)
    function fade2(){
        $("#fade2")
            .delay(1000)
            .fadeIn(1000, s1)
        function s1(){
            $("#s1")
                .delay(300)
                .fadeIn(100, s2)
            function s2(){
                $("#s2")
                    .delay(300)
                    .fadeIn(100, s3)
                function s3(){
                    $("#s3")
                        .delay(300)
                        .fadeIn(100, s4)
                    function s4(){
                        $("#s4")
                            .delay(300)
                            .fadeIn(100, s5)
                        function s5(){
                            $("#s5")
                                .delay(300)
                                .fadeIn(100, s6)
                            function s6(){
                                $("#s6")
                                    .delay(300)
                                    .fadeIn(100, s7)
                                function s7(){
                                    $("#s7")
                                        .delay(300)
                                        .fadeIn(100, s8)
                                    function s8(){
                                        $("#s8")
                                            .delay(300)
                                            .fadeIn(100, s9)
                                        function s9(){
                                            $("#s9")
                                                .delay(300)
                                                .fadeIn(100, s10)
                                            function s10(){
                                                $("#s10")
                                                    .delay(300)
                                                    .fadeIn(100, s11)
                                                function s11(){
                                                    $("#s11")
                                                        .delay(300)
                                                        .fadeIn(100, s12)
                                                    function s12(){
                                                        $("#s12")
                                                            .delay(300)
                                                            .fadeIn(100, all)
                                                        function all(){
                                                            $("#s1, #s2, #s3, #s4, #s5, #s6, #s7, #s8, #s9, #s10, #s11, #s12")
                                                                .delay(100)
                                                                .fadeOut(500)
                                                                .delay(100)
                                                                .fadeIn(500);
                                                        }}}}}}}}}}}}}}};

Answer 1

Looking at using jQuery like you have in your example, you could do something like the following:

$(document).ready(function(){
    var totalElements = 12,
        firstEl = 1,
        duration = 1000;

    var fadeNext = function(){
        firstEl++;

        if(firstEl <= totalElements) {
            $('#fade'+firstEl).fadeIn(duration, fadeNext);
        }
        return;
    }
    $("#fade").delay().fadeIn(duration, fadeNext);
});

Answer 2

I would look into using CSS animations and/or transitions. That way you don't even need to use javascript at all.

It would look something like

@keyframes my-fade-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

#fade {
    animation-name: my-fade-in;
    animation-duration: 1s;
    animation-delay: 1s;
}

This would cause the my-fade-in animation to be shown immediately on the #fade element with a delay of one second.

If you wanted to apply animations programmatically, you can store the animation properties in a class and apply that class to the element you'd like to animate. For example;

CSS:

@keyframes my-fade-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

.fadein {
    animation-name: my-fade-in;
    animation-duration: 1s;
    animation-delay: 1s;
}

Javascript (running this will trigger the fadein animation on the #fade element):

$( "#fade" ).addClass( "fadein" );

This simplifies things a bit for scenarios like you have outlined above where you need a set of different animations applied to a set of different objects.

You could even construct a more advanced animation with additional keyframes (instead of the shown 0% and 100% values).

I really can't give you any advice on how the best way is to implement this without knowing the reasoning or goal behind your animations - I'm not certain on why you have so many elements with unique IDs with animations being applied in this fashion, but I hope this helps nonetheless :)

NOTE: Check out this page to see a compatibility chart of browsers that'll support CSS animations.