Я вижу, вы пытаетесь заставить анимацию происходить одна за другой, используя метод delay().Вы можете удалить это и просто вызывать каждую следующую анимацию в обратном вызове метода animate.
Чтобы отменить анимацию, когда пользователь желает перейти на следующую страницу, просто вызовите ваш animation()методы в обратном порядке и предотвращают действие по умолчанию при нажатии на ссылку на следующую страницу.Кроме того, укажите -100% значение для всех измерений, чтобы они анимировались за пределы страницы.
Наконец, вы перенаправляете на следующую страницу после завершения анимации reverse .
Вот модифицированный код:
$(document).ready(function(){
$(".logo").animate({left: '5%'}, "slow", function() {
$(".nav").animate({right: '5%'}, "slow", function() {
$(".intro").animate({left: '5%'}, "slow", function() {
$(".pic").animate({right: '3%'}, "slow");
});
});
});
$("a[href='animateout2.html']").on('click', function(e) {
$(".pic").animate({right: '-100%'}, "slow", function() {
$(".intro").animate({left: '-100%'}, "slow", function() {
$(".nav").animate({right: '-100%'}, "slow", function() {
$(".logo").animate({left: '-100%'}, "slow", function() {
window.location.href = $(e.target).prop('href');
});
});
});
});
return false;
});
});
body {
background: #000;
overflow: hidden;
}
.container {
width: 90%;
margin: 0 auto !important;
position: relative;
}
.logo {
width: 200px;
height: auto;
position: absolute;
left:-100%;
top: 0px;
color: #FFF000;
font-weight: bolder;
margin-top: 20px;
font-size: 20px;
}
.nav {
width: auto;
position: absolute;
right:-100%;
top: 0px;
margin-bottom: 20px
}
.nav a {
color: #FFF;
}
.intro {
width: 50%;
position: absolute;
left:-100%;
top: 18%;
color: #FFF;
margin-top: 20%;
}
.intro strong {
color: #FF0000;
}
.pic {
width: 40%;
position: absolute;
right:-100%;
top: 15%;
margin-top: 8%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="container">
<div class="logo">
Logo Name
</div>
<div class="nav">
<a href="animateout.html">Page 1</a>
<a href="animateout2.html">Page 2</a>
</div>
<div class="intro">
<strong>Page 1</strong> <br>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div>
<div class="pic">
<img src="https://picsum.photos/500/500/?random" />
</div>
</div>
</body>
</html>
ОБНОВЛЕНИЕ
Если вы включите имена классов во все ваши ссылки, например так:
<a class='page1' href="animateout.html">Page 1</a>
<a class='page2' href="animateout2.html">Page 2</a>
<a class='page3' href="animateout3.html">Page 3</a>
затем замените
$("a[href='animateout2.html']").on('click'...
на
$('.page2').on('click'...
в скрипте jquery.
Вы также можете настроить таргетинг на все остальные ссылки, кроме первойодин с помощью
$('.page2, .page3').on('click'...