-1

水平方向と垂直方向の中央に配置された画像で構成される単純な Web ページがあるため、表示ページの絶対中央に表示されます。jQuery animate を使用して、この画像をページの上部に移動しようとしています。

2 つの div といくつかの css を使用して画像を中央に配置しました。

html...

<div id="outer">
    <div id="inner"><img src="images/png/logo.png" id="logo-index" width="84px" height="100px"/></div>
</div>

CSS...

#outer{
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
}

#inner{
width: 82px;
height: 100px;
margin-left: -41px;
position: absolute;
top: -50px;
left: 50%;
}

#logo-index{
opacity: 0;
}

画像は最初は不透明度 0 を使用して非表示にされ、jQuery を使用してフェードインして表示されます。次に、jQuery animate を使用して画像をページの上部に移動するようにします。

jQuery...

$('#logo-index').animate({opacity: "1"}, 1500).delay(3000, function(){
    //jQuery move to top of page here...
});

私は非常に多くの異なる方法をグーグルで検索しましたが、これを達成する正しい方法について完全に混乱しています。これを達成するのに十分なアニメーション機能の経験がありません。誰かがそうしていると確信しています。

4

1 に答える 1

0

#outer をアニメーション化します。これは、50% のトップ ポジションを持つ画像の「コンテナー」であるためです。

$('#logo-index').animate({opacity: "1"}, 1500).delay(3000, function(){
    //jQuery move to top of page here...
    $('#outer').animate({top:"10%"}, 1500);
});

ここでテストできます: jsfiddle live code to animate

私はそれが役立つことを願っています! 乾杯

于 2012-08-15T18:32:45.913 に答える