Tell me how to make a smooth appearance of squares, as well as switching squares at the touch of a button.

function autoLoopSlider(obj, time) { setTimeout(function() { if(obj == ".border_line.end"){ $(obj).addClass("end-next"); $(obj).removeClass("end"); } if(obj == ".border_line.end-next"){ $(obj).addClass("end"); $(obj).removeClass("end-next"); } }, time); }; setInterval(function(){ autoLoopSlider(".border_line.end", 2500); autoLoopSlider(".border_line.end-next", 2000);},3000); function buttonActive(button){ $(document).on("click", button , function(){ if($(".border_line").hasClass("end")){ $(".border_line").removeClass("end"); $(".border_line").addClass("end-next"); } else { $(".border_line").addClass("end"); $(".border_line").removeClass("end-next"); } }) } buttonActive(".button_1"); buttonActive(".button_2"); 
 .end { background: blue; height: 100px; width: 100px; } .end-next { background: red; height: 100px; width: 100px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="border_line end"></div> //переключение квадратов <button class="button_1">b1</button> <button class="button_2">b2</button>

    2 answers 2

    For example, add transition to class-changing blocks:

     function autoLoopSlider(obj, time) { setTimeout(function() { if(obj == ".border_line.end"){ $(obj).addClass("end-next"); $(obj).removeClass("end"); } if(obj == ".border_line.end-next"){ $(obj).addClass("end"); $(obj).removeClass("end-next"); } }, time); }; setInterval(function(){ autoLoopSlider(".border_line.end", 2500); autoLoopSlider(".border_line.end-next", 2000);},3000); function buttonActive(button){ $(document).on("click", button , function(){ if($(".border_line").hasClass("end")){ $(".border_line").removeClass("end"); $(".border_line").addClass("end-next"); } else { $(".border_line").addClass("end"); $(".border_line").removeClass("end-next"); } }) } buttonActive(".button_1"); buttonActive(".button_2"); 
     .end { background: blue; height: 100px; width: 100px; transition: all .34s ease-in-out; } .end-next { background: red; height: 100px; width: 100px; transition: all .34s ease-in-out; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="border_line end"></div> //переключение квадратов <button class="button_1">b1</button> <button class="button_2">b2</button>

      Animation http://www.jooom.ru/toster/toster_18.html

      Switch blocks http://www.jooom.ru/toster/toster_6.html