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

我一直在试图简单地将图片从顶部（div的外部）向下滑动到它应该是的位置。我发现一些其他人要求类似的东西，但迄今为止没有为我工作。我该怎么做才能使它工作？（是的，我只是使用Javascript开始）我使用jQuery ，这是我的Javascript代码：Javascript - Div/Image从顶部向下滑动

$(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和类有以下CSS设置

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

.head { top: -200px; }

来源

2013-08-02 Dawn

检查此琴：http://jsfiddle.net/j9rBz/1/

您必须指定position:relative到包装DIV，并position:absolute的IMA GE。

此外，保持图像隐藏display:none和opacity:0。在动画开始之前，您需要show()图像，然后指定opacity:1作为动画的一部分。

来源

2013-08-02 08:00:16 Abhitalks

谢谢，其实这对我的作品我还是要弄清楚如何仍保持头DIV上述固定它（因为它不再），但现在，因为它的工作，我知道如何继续前进。:)谢谢。 – Dawn

设置position:relative您的内容股利和position: absolute你的IMG。这应该让你到一个点，你可以工作，其余出去找它，你怎么想，如果我的问题的假设是正确

来源

2013-08-02 07:52:45 Lee

我从你的代码中创建一个小提琴

http://jsfiddle.net/ctrJD/

你需要动画marginTop

来源

2013-08-02 07:53:37 lavavrik

夫妇的事情你的代码错误：

您<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/ （我增加了对动画的延迟可见正确

来源

2013-08-02 08:11:56 soundswaste

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

回答

相关问题