0

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

$(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>

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

4
  • 1
    Добавьте html код 16 ноя 2017 в 18:19
  • пример не рабочий
    – Air
    16 ноя 2017 в 19:14
  • что исправил? у меня ошибку выдает
    – Air
    16 ноя 2017 в 22:27
  • @LADYX Что вы имеете ввиду под "блок закрывался с анимацией"? Плавное изменение opacity в ноль? Или блок должен сдвигаться влево-вправо 17 ноя 2017 в 8:20

1 ответ 1

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>

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.