Hello! There is such a script fragment that switches blocks forward / back:
$(document).ready(function() { var window = $('.pp_window'); var blocks = $('[id*=-box]').length; $('.pp_dot').bind('click', function() { $('.pp_window-box').hide(); $('#' + $(this).attr('id') + '-box').show(); window.show(); window.css("top", $(this).offset().top + $(this).height()); }); $('.pp_window-next, .pp_window-prev').on('click', function() { var obj = ($(this).hasClass("pp_window-next")) ? window.find(".pp_window-box:visible + .pp_window-box") : window.find(".pp_window-box:visible").prev(".pp_window-box"); var obj_id = (obj.length > 0) ? obj.attr("id") : (($(this).hasClass("pp_window-next")) ? 'pp_1-box' : window.find(".pp_window-box").last().attr("id")); var id = obj_id.split("-")[0]; $(".pp_window-box").hide(); $("#" + obj_id).show(); $(".pp_dot").removeClass("pp_dot-selected"); $("#" + id).addClass("pp_dot-selected"); window.css("top", $("#" + id).offset().top + $("#" + id).height()); if($("#" + id)) { var offset = $("#" + id).offset().top; $("body,html").animate({scrollTop: offset - topMenuHeight}, 500); } }); }); .pp_window { position: absolute; top: 20%; left: 20%; right: 0; bottom: 0; width: 200px; height: 100px; padding: 15px; background: gray; } .pp_window-box { width: 100%; height: 100%; background: white; } .pp_window-prev, .pp_window-next { position: absolute; cursor: pointer; top: 50%; } .pp_window-prev { left: 0; } .pp_window-next { right: 0; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="pp_window"> <div id="pp_1-box" class="pp_window-box">Текст 1</div> <div id="pp_2-box" class="pp_window-box">Текст 2</div> <div id="pp_3-box" class="pp_window-box">Текст 3</div> <div class="pp_window-prev"><</div> <div class="pp_window-next">></div> </div> Switching in this option is instant.
Tell me, please, how can I add animation and delay here so that when switching, the block closes with the animation and opens with the animation and the delay set in time?
Thank!
