我有一个高度根据其内容而变化的 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>
我还希望有一个选项，我可以通过单击同一个按钮来抬起和放下盒子。所以，需要两个解决方案:)
最佳答案
试试这个 fiddle :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)');
}
关于jquery - 使用 javascript 和 css3 转换以动态高度移动 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8520198/