0

だから私が欲しいもの。

ページを中心に（水平方向と垂直方向に）いくつかのコンテンツがあります。ユーザーはクリックして、コンテンツの前/次のビットをロードできます。このコンテンツはAjaxで動的にロードされます。

いつ

次の場合はすべて逆になります>

コンテンツのサイズがわからないため、コンテンツを中央に配置するためにjQueryを使用しています。

これが私が使用しているコードです：

 // Jquery, CENTER
jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
    return this;
}

$("div.item1").center(true);

ブラウザのサイズが変更されたときに中央に配置されるようにするには、次のコマンドを使用します。

$(window).bind('resize', function() {
    var that = this;

    if (!('balancer' in that)) {
        that.balancer = setTimeout(function() {
            $("div.item1").center(true);           
            delete that.balancer;
        }, 200);
    }
});

このコードを使用して、必要なアニメーションを実行しようとしました。これまでのところ運がありません。item1は私が望むように表示されますが、適切な場所にはありません（左：-= 100延期）

$('.item1').animate({
    opacity: 1,
    left: '-=100'
}, 1000);

$('.item2').animate({
    opacity: 1,
    left: '+=100'
}, 1000);

ここにjsfiddleを設定して、自分がどこにいるかを示します。

http://jsfiddle.net/GmRJ9/

私は一般的にjQueryにあまり熱心ではないので、気楽にやってください。しかし、それほど複雑ではないと感じています。

ただし、動的にアイテムをロードするときに使用したいという事実は、いくつかの問題を引き起こす可能性があります。それを念頭に置いて、私はおそらくこれに正しい方法でアプローチしているかどうかを尋ねる必要がありますか？

どんなガイダンスでも大歓迎です！前もって感謝します、

J

4

1 に答える 1

0

最初に苦労して、私は真ん中の公式を疑っていました。しかし、コンテナを長方形にします（高さを変更してください！）。動作していることがわかります。
また、marginforをitem1削除すると、両方のアイテムで位置が同じように動作することがわかります。

したがって、JSが正常であると仮定すると、CSSエラーが発生する可能性があると思いました。いくつかの隠されたマージンまたはパディングが、両方をゼロに設定しても何も明らかになりませんでした。

ブラウザを開発者ツールに交換した後、手順を繰り返して、アイテムがコンテナに対して配置されているように見えることに気付きました。

<div class="container"></div>
<div class="item1">
    <p>item1</p>
</div>
<div class="item2">
    <p>item2</p>
</div>

ビンゴ！

これは、2秒の遅延でスパイスを効かせた例です。私はいつもタイムアウトを正しく設定するのに苦労しています。それを見るのはいいかもしれません=）http://jsfiddle.net/3xLAD/
不思議なことに、 margin-topCSSを介してアイテムを設定できませんでした。これにより、divがわずかに水平に移動しました（ò.O）-> http://jsfiddle.net/9ydrQ/

于 2012-04-14T19:38:48.737 に答える