Переместить div с динамической высотой, используя JavaScript и переход CSS3 - PullRequest
Новая
       24

Переместить div с динамической высотой, используя JavaScript и переход CSS3

0 голосов
/ 15 декабря 2011

У меня есть div, высота которого меняется в зависимости от его содержимого.Элемент div расположен внизу за пределами экрана, но когда пользователь нажимает кнопку, элемент div будет отображаться точно на высоте элемента div.Например, если высота div равна 200 пикселям, он будет увеличиваться на 200 пикселей, а если высота div равна 400 пикселям, он будет увеличиваться на 400 пикселей.Я могу получить высоту элемента div и поднять элемент div вверх, но не могу переместить его обратно за пределы экрана.Вот мой код: 

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#button {
    height: 100px;
    width: 100px;
    background: blue;
}
#box {
    position: absolute;
    top: 100%;
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: all 1s ease-out;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
function moveUp() {
    var height = $("#box").height();
    $("#box").css('-webkit-transform', 'translate3d(0px,-'+height+'px,0)');
}
function moveDown() {
    var height = $("#box").height();
    $("#box").css('-webkit-transform', 'translate3d(0px,'+height+'px,0)');
}
</script>
</head>
<body>          
    <div id="button" onclick="moveUp();"></div>
    <div id="box" onclick="moveDown();"></div>
</body>
</html>

Я также хотел бы иметь возможность поднять и опустить ящик, нажав ту же кнопку.Итак, нужны два решения:)

1 Ответ

1 голос
/ 15 декабря 2011

Попробуйте эту скрипку: http://jsfiddle.net/W7NDp/2/

Сценарий: 

var visible = false;
function moveUp() {
    if(visible)
    {
        moveDown();
    }
    else
    {
        var height = $("#box").height();
        $("#box").css('-webkit-transform', 'translate3d(0px,-'+height+'px,0)');
    }
    visible = !visible;
}
function moveDown() {
    var height = $("#box").height();
    $("#box").css('-webkit-transform', 'translate3d(0px,0px,0)');
}
...