移动div与动态高度使用javascript和css3过渡

我有一个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>

我也想有一个选项，我将能够抬起和放下通过点击相同的按钮框。因此，需要两个解决方案:)

试试这个: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)');
}

相关内容

最新更新

热门标签：