1

なぜかアニメーションさせたいDIVが上から下にアニメーションしている… UPしたところから終点までアニメーションさせたい。

DIV はposition: fixedページの下部から開始されます。

これは私が今していることです：

var div2Pos = $("#feature-header-wrapper").position();
$("#123456").css('position', 'absolute');
$("#123456").animate({top: div2Pos.top}, 1000);
4

3 に答える 3

2

これがあなたが望むものだと思います：

デモ: http://jsfiddle.net/SO_AMK/Q6KNk/

jQuery:

var div2Pos = $("#div2").position();
$("#square").css({
    position: 'absolute',
    top: $("#square").position().top,
    left: $("#square").position().left
});
$("#square").animate({
    top: div2Pos.top
}, 1000);​

HTML:

<div id="square">Lorem Ipsum...</div>
<div id="div2">Lorem Ipsum...</div>​

CSS:

#square {
    width: 100px;
    height: 100px;
    background-color: lightBlue;
    position: fixed;
    bottom: 0;
}
#div2 {
    width: 100px;
    height: 100px;
    background-color: lightGreen;
    position: relative;
    top: 30px;
}

基本的にはの位置を取得してから現在div2の位置に設定#squareしますが、固定位置ではなく絶対位置を使用して、アニメーションが一番上にジャンプする代わりに発生するようにします。

注:squareが相対的に配置された要素内にある場合、これは機能しません!

于 2012-07-27T03:57:17.683 に答える
1

私も同じ問題を抱えてる。しかし、私はダックハント ゲームに参加しているため、アニメーションが数回発生します。これは、最初の 1 回だけ発生することを理解するのに役立つと思いました。その後、アニメーション化している div は、指定した位置を保持し、下から上にアニメーション化します。だからもし私がしなければならないのなら...私は何もしない余分な小さなアニメーションを追加することができると思います. うまくいけば、平凡ではないものを見つけることができますが、それが役立つことを願っています.

于 2012-10-17T01:26:57.747 に答える
0

あなたはこのようなものをいじることができます

       $("#123456").animate({top: '-=300px'}, 1000);

これは 300px 以下にアニメーション化され、上に移動します (それがあなたが望んでいたことだと思います)

于 2012-07-27T03:43:10.013 に答える