3

我一直在尝试简单地将图片从顶部（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; }
4

4 回答 4

2

您的代码有几个问题：

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

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

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

    $(document).ready(function(){

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

    });

  3. 你<img>应该有position:absolute;和它的父 ie#content应该有position:relative;最高的定位工作。

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

于 2013-08-02T08:11:56.160 回答
1

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

http://jsfiddle.net/ctrJD/

你需要动画marginTop

于 2013-08-02T07:53:37.847 回答
0

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

于 2013-08-02T07:52:45.233 回答
0

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

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

display:none此外，使用和隐藏图像opacity:0。在动画开始之前，您可以show()将图像指定opacity:1为动画的一部分。

于 2013-08-02T08:00:16.037 回答