Search code examples
javascriptjqueryjquery-callback

How to shorten a jQuery function?


I have this jQuery function that work. Every 2 lines is the same except a minor changes. How can I shorten it?

$(".c1").delay(5000).fadeOut("slow", function() {
    $("#phone").addClass("c2").fadeIn("slow", function() {
        $(".c2").delay(5000).fadeOut("slow", function() {
            $("#phone").addClass("c3").fadeIn("slow", function() {
                $(".c3").delay(5000).fadeOut("slow", function() {
                    $("#phone").addClass("c4").fadeIn("slow", function() {
                        $(".c4").delay(5000).fadeOut("slow", function() {
                            $("#phone").addClass("c5").fadeIn("slow", function() {
                                $(".c5").delay(5000).fadeOut("slow", function() {
                                    $("#phone").addClass("c6").fadeIn("slow", function() {
                                        $(".c6").delay(5000).fadeOut("slow", function() {
                                            $("#phone").addClass("c7").fadeIn("slow", function() {
                                                $(".c7").delay(5000).fadeOut("slow", function() {
                                                    $("#phone").addClass("c8").fadeIn("slow", function() {
                                                        $(".c8").delay(5000).fadeOut("slow", function() {
                                                            $("#phone").addClass("c9").fadeIn("slow", function() {
                                                                $(".c9").delay(5000).fadeOut("slow", function() {
                                                                    $("#phone").addClass("c1").fadeIn("slow");
                                                                });
                                                            });
                                                        });
                                                    });
                                                });
                                            });
                                        });
                                    });
                                });
                            });
                        });
                    });
                });
            });
        });
    });
});
});

Solution

  • You could use a recursive function like this:

    function phoneCall(i){
        $(".c" + i).delay(5000).fadeOut("slow", function() {
            $("#phone").addClass("c" + (i + 1)).fadeIn("slow", function() {
                if(i <= 9) phoneCall(i + 1);
            });
        });            
    } 
    phoneCall(1);