4

私の目標は、いくつかの画像をdiv内の水平方向の中央に表示し、さらにラッパー内の水平方向の中央に表示することです。これは可能ですが、画像に対してjQueryの「バウンス」効果を呼び出すと、画像は左揃えになります。

私は何年もの間いじくり回していて、彼らが跳ねている間、彼らを中心にとどまらせることができません。

http://jsfiddle.net/vX3gz/2でチェックしてください

Win7で最新のFirefoxを使用しています。

4

2 に答える 2

3

画像が左に「ジャンプ」している理由は、バウンスがdiv設定されたインライン スタイルを持ついくつかの要素を追加しているためmargin: 0です。

したがって、非常に簡単な回避策は、独自の CSS でこれをオーバーライドすることです。

#thin > div {
    margin: 0 auto !important;   
}

通常、私は使用に反対しています!importantが、インライン スタイルをオーバーライドするために使用しているので、許容できると思います。

作業例: http://jsfiddle.net/vX3gz/33/

于 2012-07-18T12:26:18.350 に答える
2

私はそれを解決したと思います。私が（CSSで）気に入っている方法ではなく、おそらく少しやり過ぎですが、それでも機能します。問題は確かに左マージンであり、中央に配置したい可変コンテンツを処理するときに、実際には左マージンを設定したくありません。また、Safari（Windows用）にも同じ問題があることに気づきました。

ここで動作することを確認してください：http：//jsfiddle.net/c_kick/tuu4Q/

したがって、私が行ったことは、バウンスする要素を渡すカスタムBounceMe（）関数を作成することです。内容：

  1. FirefoxまたはSafariを使用しているかどうかを確認し、使用していない場合は定期的にバウンスします（以下の手順をスキップします）
  2. 要素の現在の（実際の）左オフセットを取得します
  3. そのオフセットをマージン左として要素に適用します
  4. それをバウンス
  5. 残りのマージンを自動にリセット

また、要素に「バウンス」フラグを設定して、関数がすでにバウンスしているものをバウンスしないようにします。

重要なすべての要素を取得する必要があります

position: relative;

または、オフセット計算がオフになります。

jQuery：

var userAgent = navigator.userAgent.toLowerCase();
$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());//to prevent Chrome from being detected as safari  

function BounceMe($this) {
    if($.browser.mozilla || $.browser.safari && !$.browser.chrome){
        if (!$this.data('bouncing')) {
            $this.each(function(){ //run on each img
                $pos = $(this).position(); // get position of image
                $(this).css({marginLeft: $pos.left}); //'hard' set the margin left
            });

            $this.data('bouncing', true).effect("bounce", function(){
                $this.css({marginLeft: 'auto'}) //reset the margin left after animation
                    .data('bouncing', false);
            });
        } else {
            //images are still animating, do nothing
        }
    } else {
        //no Firefox or Safari? No problem, do a regular bounce.
        $this.stop().effect("bounce");
    }
}

$(document).ready(function() {

    BounceMe($("img")); //bounce on pageload

    $("#bounce").click(function() {
        BounceMe($("img")); //bounce on click on link
    });
});

関数を.extend（）に書き換えて、通常のBounce（）のようにチェーンできるようにすることができます。

于 2012-07-18T11:56:36.920 に答える