Question

有没有办法让一些像素向内移动一个带有文字的div？（也许使用jQuery或w / e）

我会得到的效果就像stackoverflow在黄色消息顶部显示（对于徽章）但我需要在页面内部，而不是向下移动页面的其余部分

实施例

http://img690.imageshack.us/img690/7324/senzatitolo2mb.jpg

（我会在消息向下移动时添加淡入淡出效果）

聚苯乙烯。请考虑消息可以超过1（就像顶部的stackoverflow一样）

Answer 1

使用jQuery，可以这样做：

<div id="message">Some message</div>
$("#message").slideDown(500); //where 500 is the time effect in miliseconds..

在线演示：http://jsfiddle.net/NzPfM/

更多关于jQuery效果的信息：http://api.jquery.com/category/effects/

如果你想将它向下滑动并同时淡入它，那么你应该使用.animate（）代替：

$("#message").animate({height:"30px", opacity:1 },500);

在线演示：http://jsfiddle.net/NzPfM/1/

更新：如果您想在动画制作时避免移动其他内容，可以在css中使用position:absolute，请参阅下面的演示：

演示避免下推： http://jsfiddle.net/NzPfM/2/

Answer 2

您可以将div设置为position:absolute，然后使用jQuery.animate设置动画以更改top样式。

在这里阅读jQuery.animate：http://api.jquery.com/animate/

您可以在此处看到一个简单示例：http://jsfiddle.net/NsxTa/

注意：与使用slideDown相反，此方法实际上会将整个div从其隐藏位置向下滑动，其中slideDown将显示静态定位的内容，这看起来非常令人满意

Answer 3

假设您的页面没有放置在一个位置绝对的容器内，添加一个容器元素作为正文的第一个子元素将向下推送呈现页面的所有其余部分。（容器 - 包含HTML的任何HTML标记。通常是DIV）。

这是使用纯javascript的示例：

http://jsfiddle.net/osher/ByngB/

将“添加”连接到您的消息传递事件，或在服务器上呈现它将“删除”连接到消息栏的关闭按钮这将是全部:)）

function $e(s){ return document.getElementById(s) }

function add(){
    var d = document.createElement("div");
    d.innerHTML = "your message: " + $e("txt").value;
    document.body.insertBefore(d, document.body.firstChild);
}

function remove(){
    // assuming that your page content is wrapped in a div with ID="content"
    if (document.body.firstChild.id == "content") return;

    document.body.removeChild( document.body.firstChild);
}

JavaScript稍微向下移动消息（div）？

3 个答案: