Перемещение div с динамической высотой с использованием перехода javascript и css3

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

<!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>

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

источник

2011-12-15 nqw1

Попробуйте эту скрипку: 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)'); 
}

источник

2011-12-15 12:44:41 Niels

Спасибо большое! Работает отлично! – nqw1

Перемещение div с динамической высотой с использованием перехода javascript и css3

ответ

Смежные вопросы