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 とクラスには次の 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;、その親は、トップポジショニングが機能するために#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:relativecontent 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 に答える