Question

这里是jsFiddle： http://jsfiddle.net/arJEx/

这是我到目前为止所得到的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Waiting</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>


    <style>
* { margin:0;padding:0; }
    #wait {

background:#ABC7D9;
border-top:4px solid #597F99;
border-bottom:4px solid #597F99;
padding:50px;
text-align:center;
font:23pt Georgia;
color:#1C5378;
display:none;
overflow: hidden;

    }
    </style>

    <script type="text/javascript">
$(function() {

$(".act").live("click",function() {
     $("#wait").slideDown("slow");
    });
    });
    </script>

</head>

<body>

<button class="act">Activate effect</button>

<div id="wait">Please wait...</div>



</body>
</html>

当我按下那个按钮向下滑到页面中间时，我想要蓝色div ...但我似乎无法找到如何做到这一点。请帮帮忙？

编辑：好吧，它不一定是屏幕的中间但是靠近部分的顶部。喜欢......靠近页面的中间位置。

Answer 1

你的JS一切都很好。你需要改变CSS。首先div的容器必须填满所有窗口：

html, body { width: 100%; height: 100%; padding: 0; margin: 0; }

比改变div的css。第一种方法（不确定IE）：

#wait {
   /* remove padding and append those */
   position: absolute;
   top: 5%; /* change it */
   bottom: 50%;
   width: 100%
}

第二个：

#wait {
   /* remove padding and append those */
   height: 50%;
}

您需要解决一个问题。您将需要纵向对齐您的文本而不使用填充，这是另一个问题（只需在stackoverflow或goole中搜索它）。

Answer 2

这是你想要的吗？

 $("#wait").height(0).animate({height: $(window).height() / 2});

Answer 3

这是你要找的吗？

$(function() {

$(".act").click(function() {

var h = $("#wait").height()/2;
var t = $(window).height()/2;
var pos = t - h - 50;
 $("#wait").slideDown("slow").css('top', pos);

});
});

你必须添加位置：相对;和宽度：100％给你的css。

Answer 4

这将显示div并通过扩展上边距200px将其向下推到页面。它使用Jquery's animate，它允许您随时间更改数字属性（读取：移动内容）。 SlideDown基本上是调用animate函数的简写，它可以增加元素的高度以将其向下移动到页面上。不是增加高度，而是保持相同的高度，只是将元素移动到页面的下半部分。

这有什么接近你想要的吗？：d

$(function() {

$(".act").live("click",function() {
     $("#wait").show().animate({ marginTop: "+=200"  }, 600);
    });
});

将div滑到页面中间

4 个答案: