0

背景画像をアニメーション化して、設定されたピクセル数だけ下に移動しようとしていますが、ページの中央に留まります。要素をもう一度クリックすると、一番上に戻る必要がありますが、それでも中央に残ります。以下は現在のコードです。

        $(document).ready(function() {
        $('#email_campaigns').click(function(){
            var width = $(window).width();
            width = (width / 2) - 700;

            if($('#email_campaigns_box').css('display') == 'none'){
                //$('body').css('background-position','center 119px');
                $('body').animate({
                    backgroundPosition: (width + "px 119px")
                }, {duration:500});
            } else {
                //$('body').css('background-position','center top');
                $('body').animate({
                    backgroundPosition: (width + "px 0px")
                }, {duration:500});
            }

            $('#email_campaigns_box').slideToggle("slow");
            $('#client_login_box').slideUp("slow");             
        });

        $('#client_login').click(function(){
            var width = $(window).width();
            width = (width / 2) - 700;

            alert(width);

            if($('#client_login_box').css('display') == 'none'){
                //$('body').css('background-position','center 119px');
                $('body').animate({
                    backgroundPosition: (width + "px 119px")
                }, {duration:500});
            } else {
                //$('body').css('background-position','center top');
                $('body').animate({
                    backgroundPosition: (width + "px 0px")
                }, {duration:500});
            }

            $('#client_login_box').slideToggle("slow");
            $('#email_campaigns_box').slideUp("slow");              
        });
    });

数値のみを受け入れるため、「center」を渡すことはできません。私の目標は、ページの中心をピクセル (幅 = (幅 / 2) - 700;) で計算し、この大まかな位置にアニメーション化することです (通常、スクロールバーのために数ピクセルずれてから、中心に移動します)。 .css() 呼び出しを使用します。

問題は、IE がボールをプレーしたくないということです。IE はまったくアニメーションしません。Firefox/Safari/Chrome はすべて期待どおりに動作します。

以下は実際の例です: http://recklessnewmedia.com/new/# (上部の「メール キャンペーン」をクリックします)。

ありがとう

4

1 に答える 1

1

サイトの下部のコンテナ div に背景を配置することをお勧めします。次に、上記のログインを展開し、ブラウザに作業を任せてください!

基本機能の簡単なデモは次のとおりです。

http://jsfiddle.net/UkGva/

そうすれば、記述するコードが少なくなり、jquery は面倒な作業を行う必要がなくなります。再構築には多少の手間がかかりますが、底のあるコンテナの上のコンテナでログイン (隠し部分) を作成するだけです。

また、これはスクロールバーなどすべてで機能するはずです（Chromeのような動作中のブラウザーでも少しずれていることがわかりました）。そして、書く JavaScript が少なくなります!

于 2010-06-17T12:24:03.097 に答える