Я сейчас настраиваю свою домашнюю страницу и делаю несколько складных коробок для лучшей структуры.Складные коробки были созданы с использованием чистого CSS и HTML, но когда активируется сборно-разборное устройство, (очевидно) элемент div, в котором находится складной объект, также должен быть увеличен (изменение высоты).
Чтобы добиться этогоЯ использую jquery и придумал следующее (это просто быстрый / маленький пример, чтобы продемонстрировать проблему):
$(function() {
var height_content = $("#content").height();
$('#btn').click(function() {
if ($(this).is(':checked')) {
$('#content').css({
'height': height_content + 700 + 'px',
});
height_content = $("#content").height();
console.log(height_content);
} else {
$('#content').css({
'height': height_content - 700 + 'px',
});
height_content = $("#content").height();
console.log(height_content);
};
});
});
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#content {
border: 1px solid red;
height: 200px;
width: 200px;
margin-left: auto;
margin-right: auto
}
#footer {
border: 1px solid green;
height: 50px;
width: 200px;
margin-left: auto;
margin-right: auto
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="content">
<br><br><br><br><br><br><br><br>
<input id="btn" type="checkbox">
</div>
<div id="footer">
<p>Footnote</p>
</div>
</body>
</html>
И это работает, когда я нажимаю на флажок, div содержимого становится больше.Теперь, так как это выглядело очень статично, я решил включить `элемент перехода для гладкости, подобный этому:
...
if($(this).is(':checked')) {
$('#content').css({
'height': height_content + 700 + 'px',
'transition': 'height 0.5s'
});
...
else {
$('#content').css({
'height': height_content - 700 + 'px',
'transition': 'height 0.5s'
});
...
Но теперь элемент высоты играет странно и расширяет его до различных ложных размеров.Журнал правильного расширяемого процесса выглядит следующим образом:
test.html:26 900
test.html:36 200
test.html:26 900
test.html:36 200
test.html:26 900
test.html:36 200
test.html:26 900
test.html:36 200
test.html:26 900
test.html:36 200
test.html:26 900
test.html:36 200
test.html:26 900
test.html:36 200
test.html:26 900
test.html:36 200
test.html:26 900
test.html:36 200
test.html:26 900
test.html:36 200
test.html:26 900
test.html:36 200
С параметром перехода я получаю этот журнал:
test.html:26 200
test.html:36 900
test.html:26 0
test.html:36 1600
test.html:26 0
test.html:36 2300
test.html:26 0.484375
test.html:36 2995.36
test.html:26 4.60938
test.html:36 3695.36
test.html:26 0
test.html:36 4388.78
test.html:26 0
test.html:36 5087.64
test.html:26 0
test.html:36 5786.27
test.html:26 0
test.html:36 6486.27
test.html:26 0
test.html:36 7186.27
test.html:26 10.4062
test.html:36 7886.27
test.html:26 0
Кто-нибудь знает, как я могу это исправить?