Javascript - Div/Image 从顶部向下滑动答案

【问题标题】：Javascript - Div/Image Slide down from the topJavascript - Div/Image 从顶部向下滑动
【发布时间】：2013-08-02 07:47:51
【问题描述】：

我一直试图简单地让图片从顶部（div 之外）滑到它应该在的位置。我发现其他一些人要求类似的东西，但到目前为止对我没有任何帮助。我该怎么做才能让它发挥作用？（是的，我刚开始使用 Javascript）我正在使用 JQuery，这是我的 Javascript 代码：

$(document).ready(function(){

function slide(){
    $(".head").delay(100).animate({"top":"400px"},500);}
});

应该是让这个div里的图片动起来。

<div id="content">
    <img src="img/contact_header.png" alt="headerContact" class="head" /><br />
    <p> Text here </p>
</div>

div 和 class 具有以下 CSS 设置

#content {
    width: 800px;
    padding: 0 0 40px 0; 
    margin-left: 100px;
    margin-top: 160px;
    background-color: #FFF;
    float: left;
}

.head { top: -200px; }

【问题讨论】：

标签： javascript jquery slidedown

【解决方案1】：

你的代码有几个问题：

您的 <img> 没有结束标记 (/>)。

<img src="img/contact_header.png" alt="headerContact" class="head" />

您已经声明了slide() 函数，但没有调用它：

$(document).ready(function(){

function slide(){
    $(".head").delay(100).animate({
        "top":"400px"
    },500);
}
slide(); //<- calling the function

});

您的<img> 应该有position:absolute; 和它的父级，即#content 应该有position:relative; 才能使顶部定位起作用。

这是一个工作示例：http://jsfiddle.net/bvjdz/3/ （我增加了正确显示动画的延迟

【讨论】：

【解决方案2】：

我用你的代码创建了一个小提琴

http://jsfiddle.net/ctrJD/

你需要动画marginTop

【讨论】：

【解决方案3】：

检查这个小提琴：http://jsfiddle.net/j9rBz/1/

您必须将position:relative 指定给包装器div，并将position:absolute 指定给图像。

另外，使用display:none 和opacity:0 隐藏图像。在开始制作动画之前，您先show() 图像，然后将opacity:1 指定为动画的一部分。

【讨论】：

谢谢，这实际上对我有用。我仍然必须弄清楚如何仍然将标题 div 固定在其上方（因为它不再是了），但现在因为它正在工作，我知道如何继续前进。 :) 谢谢。

【解决方案4】：

在您的内容 div 上设置 position:relative，在您的 img 上设置 position: absolute。如果我对问题的假设是正确的，那应该会让你达到一个点，你可以解决剩下的问题来得到它想要的结果

【讨论】：