0

ここで何が正しい解決策なのかわかりません。検索機能と Google を使用しましたが、まだアドバイスが必要です。

window.load でいくつかの div がアニメーション化されています。例えば：

var showreel = $('#plbg');              
showreel.delay(1500).animate({
right: $(window).width()/2 - showreel.outerWidth()/2}, 500, 'swing');

したがって、これは div を画面の中央にアニメーション化します。ウィンドウのサイズを変更すると、動的に中央に配置されません。

次のように、さらに数行書きました。

$(window).resize(function() {
var showreel = $('#plbg');              
showreel.delay(1500).animate({
right: $(window).width()/2 - showreel.outerWidth()/2}, 500, 'swing');
});

アニメーションで動作するようになりましたが、アニメーションなしで div を新しい場所に移動したいだけです。しかし、おそらく別のソリューションを使用する方が良いでしょうか?

誰かアドバイスをくれませんか？

ありがとうございました！

編集: 事件は解決したと思います。皆様、ありがとうございました! http://jsfiddle.net/jruddell/bV8qp/2/

4

2 に答える 2

0

使用する.center {position: relative; margin-left: auto; margin-right: auto; }

于 2012-07-16T16:13:47.687 に答える
0

更新しました：

私の最初のアイデアはうまく機能しないことがわかりました。正解は、絶対位置と相対位置を組み合わせて使用​​することです。あなたはこれを理解しているようですが、私は他の人の利益のために私の答えを訂正しています。

余白の「自動」値はアニメーション化できないため、元のコードで行ったように、ページの読み込み時にdivを中央にアニメーション化するには絶対位置を使用する必要があります。ただし、divがページの中央に到達すると、ウィンドウのサイズが変更されたときに中央にとどまるように、自動マージンを使用してスタイルを相対位置に変更できます。

要素にCSSを直接​​設定するのではなく、2つの異なるクラス間でCSSを切り替えることをお勧めします。1つは「アニメーション」状態用で、もう1つは「中央」状態用です。これにより、アニメーションコードを変更することなく、要素にスタイルを追加できます。ただし、これを行うには、アニメーションが終了したら、アニメーションの直接CSS変更を元に戻す必要があります。そうしないと、要素に直接設定された絶対位置プロパティが、スタイルシートで設定された相対位置プロパティを上書きします。

したがって、ページのCSSでは、次のように2つのクラスを定義できます。

.fly-in {
    position:absolute;
    left:0px;
}
.center {
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

次に、window.load関数、またはアニメーションを実行する場所で、次のようなコードを使用できます。

var showreel = $('#plbg');
showreel.addClass("fly-in");
showreel.delay(1500).animate({
    left: ($(window).width() - showreel.width()) / 2 + "px" 
}, 500, 'swing', function() {
    showreel.removeClass("fly-in").addClass("center");
    //Clear the "left" property that animate set directly on the div
    showreel.css('left',''); 
});

これにより、アニメーションを実行する前に絶対位置を使用するようにdivがanimate設定され、アニメーションの完了時に相対位置に設定するコールバック関数（の最後の引数）を使用してアニメーションが実行されます。

于 2012-07-16T17:10:34.343 に答える