Untitled

<html>

    <head>

        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="style.css">
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

        <script>


              var dupa_2;
			  var dupa;


                    function gora(){
                   clearInterval(dupa_2);
                    var czas = 400;
                    var ilosc = document.getElementsByTagName("p").length;
                            for (i = 1; i <= ilosc; i++){
                                var p = $("#"+i);
                                p.animate({backgroundColor: "black"}, 500+(ilosc-i)*czas);
                                p.animate({backgroundColor: "white"}, 5+i*czas);


                            }
							 dupa = setInterval(gora(), 4000);
                    };


                   function dol(){
				  clearInterval(dupa);
				   var czas = 550;
                    var liczbaid = document.getElementsByTagName("p");
                            for (i = 1; i <= liczbaid.length; i++){
                                var p = $("#"+i);
                                    p.animate({backgroundColor: "#0066ff"}, 500+i*czas);
                                p.animate({backgroundColor: "white"}, 500+i*czas);

                            };
							 dupa_2 = setInterval(dol(), 9000);
				   };


        </script>

    </head>

    <body>

        <p id="1">a </p>
        <p id="2"> b</p>
        <p id="3">c </p>
        <p id="4"> d</p>


        <button onClick="gora()" id="gora">Góra</button>
		<button onClick="dol()" id="dol">Dół</button>
    </body>

</html>