Итак, у меня есть три divs в виде пузырей. Сейчас я просто работаю над первым. Они должны взорваться при нажатии, занимая почти весь экран, а затем возвращаются к исходному пузырю, когда нажимается название. Вот код - все это дело будет гораздо легче объяснить, если вы запустите его:Переходы CSS не работают после jQuery Animation?
<!DOCTYPE html>
<html>
<head>
<title>KURB - Home</title>
<link rel="stylesheet" type="text/css" href="kurb.css"/>
<link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div id="main">
<p id="k">KURB</p>
</div>
<div id="about">
<p class="label">Blah blah blah</p>
</div>
<div id="work">
<p class="label">Blah blah blah</p>
</div>
<div id="contact">
<p class="label">Blah blah blah</p>
</div>
<script type="text/javascript">
var main = $("#main");
var about = $("#about");
var work = $("#work");
var contact = $("#contact");
var open = false;
about.click(function() {
about.animate({
height: "100vh",
marginTop: "0vh",
width: "100%",
marginLeft: "0%",
borderRadius: "0",
opacity: "1"
}, 300);
main.animate({
marginTop: "1vh"
}, 300);
about.css("cursor", "auto");
work.css("display", "none");
contact.css("display", "none");
main.css("cursor", "pointer");
open=true;
});
main.click(function() {
if (open = true) {
work.css("display", "inline");
contact.css("display", "inline");
main.css("cursor", "auto");
about.animate({
width: "38%",
marginLeft: "31%",
height: "30vh",
marginTop: "7vh",
borderRadius: "100%",
opacity: "0.6"
}, 300);
main.animate({
marginTop: "10vh"
}, 300);
about.css("cursor", "pointer");
open=false;
}
});
</script>
</body>
</html>
CSS:
body {
overflow: hidden;
}
#main {
float: left;
width: 20%;
height: 10vh;
margin-top: 10vh;
margin-left: 40%;
text-align: center;
}
#k {
font-family: Questrial;
font-size: 70px;
margin-top: -7px;
margin-left: -2px;
color: #404040;
border-bottom: 2px solid #404040;
line-height: 0.85;
}
#about {
float: left;
clear: both;
width: 38%;
height: 30vh;
margin-top: 7vh;
margin-left: 31%;
text-align: center;
background-color: #33CC33;
border-radius: 100%;
opacity: 0.6;
transition: opacity .5s, margin-top .5s, margin-bottom .5s;
-webkit-transition: opacity .5s, margin-top .5s, margin-bottom .5s;
cursor: pointer;
}
#about:hover {
opacity: 0.8;
margin-top: 5vh;
margin-bottom: 2vh;
}
#work {
float: left;
width: 38%;
height: 30vh;
margin-top: 0vh;
margin-left: 10%;
text-align: center;
background-color: #323280;
border-radius: 100%;
opacity: 0.6;
transition: opacity .5s, margin-top .5s;
-webkit-transition: opacity .5s, margin-top .5s;
cursor: pointer;
}
#work:hover {
opacity: 0.8;
margin-top: -2vh;
}
#contact {
float: right;
width: 38%;
height: 30vh;
margin-top: 0vh;
margin-right: 10%;
text-align: center;
background-color: #FF6600;
border-radius: 100%;
opacity: 0.6;
transition: opacity .5s, margin-top .5s;
-webkit-transition: opacity .5s, margin-top .5s;
cursor: pointer;
}
#contact:hover {
opacity: 0.8;
margin-top: -2vh;
}
.label {
font-family: Questrial;
color: white;
font-size: 35px;
margin-top: 80px;
}
Теперь я был в состоянии сделать все это. Проблема заключается в том, что переход CSS, который должен изменить прозрачность и margin-top/margin-bottom, похоже, не работает. Прозрачность не меняется вообще, и div не продвигается вверх - нижние два divs движутся вниз. Я понятия не имею, почему, но я подозреваю, что это потому, что я каким-то образом напортачил анимацию jQuery. Я заметил, что когда div имеет полный размер, переходы CSS деактивируются. Может быть, они остаются деактивированными? ... Помогите?
В вашем 'main.click()' функция у вас есть ошибка с условием, если заявление. Это должно быть 'if (open === true) {' если сравнивать с true. Это не решает вашу проблему, но я надеюсь, что это поможет отладки :) – Danoram