Question

我一直试图简单地将图片从顶部（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和类具有以下CSS设置

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

.head { top: -200px; }

Answer 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/ （我已经增加了正确显示动画的延迟

Answer 2

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

http://jsfiddle.net/ctrJD/

您需要为marginTop

制作动画

Answer 3

在您的内容div上设置position:relative，在您的img上设置position: absolute。如果我对问题的假设是正确的话，这应该让你能够完成剩下的工作以获得你想要的结果

Answer 4

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

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

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

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

4 个答案: