Делал менюшку с анимацией, веселья ради. Но вот конечный результат меня немного не устраивает.
Подскажите как поправить?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
body {
background-image: radial-gradient(circle farthest-corner at center, #162531 0%, #040E13 100%);
}
ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
.menuBlock {
position: relative;
width: 300px;
height: 400px;
margin: 4%;
/*border: 1px solid #000;*/
}
.pill {
position: relative;
width: 50%;
color: white;
margin-top: 10px;
padding: 10px 5px;
text-align: center;
background-color: black;
border: 2px solid silver;
border-radius: 15px;
overflow: hidden;
cursor: pointer;
}
.textBlock {
position: relative;
}
.imgBlock {
display: none;
}
.bordEf {
animation: borBot 1s linear infinite;
}
@keyframes borBot {
0%, 20%, 40%, 60%, 80%, 100% {
border-bottom: 4px solid silver;
}
10%, 30%, 50%, 70%, 90% {
border-bottom: 4px solid white;
}
}
.wobbleEf {
animation: wobble 1s linear infinite;
animation-fill-mode: forwards;
}
@keyframes wobble {
from {
-webkit-transform: none;
transform: none;
}
15% {
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
}
30% {
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
}
45% {
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
}
60% {
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
}
75% {
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
}
to {
-webkit-transform: none;
transform: none;
}
}
.fallOut {
position: absolute;
}
.upGate {
position: absolute;
top: -70%;
left: 0;
width: 100%;
height: 60%;
background: repeating-linear-gradient(90deg, transparent 0px, transparent 2px, #111 2px, #111 4px),
repeating-linear-gradient(45deg, #222 0px, #222 10px, #1111B5 10px, #111 20px);
z-index: 2;
}
.downGate {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 60%;
background: repeating-linear-gradient(90deg, transparent 0px, transparent 2px, #111 2px, #111 4px),
repeating-linear-gradient(-45deg, #222 0px, #222 10px, #FFDD00 10px, #111 20px);
z-index: 2;
}
</style>
</head>
<body>
<div class="menuBlock">
<ul>
<li>
<div class="pill">
<div class="upGate"></div>
<div class="textBlock">TestBlock1</div>
<div class="imgBlock"><img src="https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/code.jpg?raw=true" alt="alt"></div>
<div class="downGate"></div>
</div>
</li>
<li>
<div class="pill">
<div class="upGate"></div>
<div class="textBlock">TestBlock2</div>
<div class="imgBlock"><img src="https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/code.jpg?raw=true" alt="alt"></div>
<div class="downGate"></div>
</div>
</li>
<li>
<div class="pill">
<div class="upGate"></div>
<div class="textBlock">TestBlock3</div>
<div class="imgBlock"><img src="https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/code.jpg?raw=true" alt="alt"></div>
<div class="downGate"></div>
</div>
</li>
<li>
<div class="pill">
<div class="upGate"></div>
<div class="textBlock">TestBlock4</div>
<div class="imgBlock"><img src="https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/code.jpg?raw=true" alt="alt"></div>
<div class="downGate"></div>
</div>
</li>
<li>
<div class="pill">
<div class="upGate"></div>
<div class="textBlock">TestBlock5</div>
<div class="imgBlock"><img src="https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/code.jpg?raw=true" alt="alt"></div>
<div class="downGate"></div>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
window.onload = function () {
var menuBlock = $('.menuBlock'),
upGate = $('.upGate'),
downGate = $('.downGate'),
fallOut = $('.fallOut'),
imgBlock = $('.imgBlock'),
pill = $(".pill");
menuBlock.on("click", "li", function () {
var tp = $(this).find(pill);
var prevEl = $(this).prev().find(pill);
var nextEl = $(this).next().find(pill);
if ($(this).children().hasClass('fallOut')) {
return
} else {
if (pill.hasClass('fallOut')) {
var imgBl = $('.fallOut').find(imgBlock);
var line = $(".line");
imgBl.fadeOut(500);
imgBl.parent().delay(1000).animate({top: "-14%"}, 500).animate({marginLeft: '0%'}, 500).addClass('line'); //создаю временный класс, что б можно было как то взаимодействовать
$('.line').parent().prependTo(this.parentNode);
line.removeClass('fallOut');
line.first().removeClass('line');
// pill.not(".fallOut ").css("width", "350px"); // Вот эта штука не срабатывает, я хотел что б меню без класса смешалось вниз, для красоты
}
$(this).find(upGate).animate({top: "0%"}, 500);
$(this).find(downGate).animate({top: "55%"}, 500);
tp.delay(600).animate({marginLeft: '60%'}, 500);
prevEl.delay(1500).addClass('bordEf');
nextEl.delay(1500).addClass('wobbleEf');
$(this).find(upGate).delay(500).animate({top: "-60%"}, 800);
$(this).find(downGate).delay(500).animate({top: "100%"}, 800);
setTimeout(function () {
tp.addClass('fallOut')
prevEl.delay(1500).removeClass('bordEf');
nextEl.delay(1500).removeClass('wobbleEf');
}, 1800);
$(this).find(imgBlock).delay(2000).fadeIn(500);
}
});
}
</script>
</body>
</html>
1)Проблема в том что если медленно клацать на блоки меню то всё отыгрывается нормально, по порядку. Но если жать на новый блок пока не отыгралась анимация первого, то всё летит к чертям
2) Я не понимаю почему у меня не получаеться задать смещение блоков (которые не имеют класса .fallOut ) в конце, что б было крассиво
