Как сделать задержку и анимацию между переключениями?

414

18 ноября 2017, 13:07

Здравствуйте! Есть такой фрагмент скрипта, который переключает вперед/назад блоки:

$(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">&lt;</div> 
<div class="pp_window-next">&gt;</div> 
</div>

Переключение в данном варианте идет моментальное.
Скажите, пожалуйста, как можно здесь добавить анимацию и задержку таким образом, чтобы при переключении блок закрывался с анимацией, а открывался с анимацией и заданной по времени задержкой?
Спасибо!

Answer 1

В таком случае Вам помогут функции jQuery: fadeIn, fadeOut и delay с параметрами в мс (подробную документацию смотрите тут: https://jquery-docs.ru/)

$(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").fadeOut(300); 
        $("#" + obj_id).delay(500).fadeIn(300); 
        $(".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">&lt;</div> 
<div class="pp_window-next">&gt;</div> 
</div>