5

私はこのIE 7に夢中になっています...

==> hhttp://neu.emergent-innovation.com/

次の関数が IE 7 では機能しないのに、Firefox では完全に機能するのはなぜですか? アニメーション機能にバグはありますか?

function accordion_starting_page(){
    // hide all elements except the first one
    $('#FCE-Inhalt02-ContentWrapper .FCE-Fade:not(:first)').css("height", "0").hide();
    $('#FCE-Inhalt02-ContentWrapper .FCE-Fade:first').addClass("isVisible");

    $('div.FCE-Title').click(function(){

        // if user clicks on an already opened element => do nothing
        if (parseFloat($(this).next('.FCE-Fade').css("height")) > 0) {
            return false;
        }

        var toHide = $(this).siblings('.FCE-Fade.isVisible');

        toHide.removeClass("isVisible");

        // close all opened siblings
        toHide.animate({"height": "0", "display": "none"}, 1000);

        $(this).next('.FCE-Fade').addClass("isVisible").animate({"height" : "200"}, 1000);

        return false;
    });
}

ご助力ありがとうございます...

どうもありがとう、それらは素晴らしいヒントでした！残念ながら、それはまだ機能しません...

問題は、IE がアニメーションが終了するまで両方のコンテナーのコンテンツを表示することです... Firefox は正しく動作します...「オーバーフロー: 非表示」の問題だと思いましたが、何も変わりませんでした。

私はすでにアコーディオンプラグインを試しましたが、まったく同じように動作します...

4

8 に答える 8

8

animate 関数で同様の問題に遭遇し、コア jQuery ライブラリからのエラーが表示されたときに驚きました。ただし、jQuery は問題ありません。その IE に対応する必要があります。

IE で要素の属性をアニメーション化するときは、変更しようとしている属性の開始点が CSS にあることを確認する必要があります。これはサファリにも当てはまります。

例として、div を連続的に左に移動すると、

JQuery:

var re = /px/;
var currentLeft = $("#mydiv").css('left').replace(re,'') - 0;
$("#mydiv").css('left',(currentLeft-20)+'px');

CSS:

#mydiv { position: absolute;    top: 0;    left: 0; }

左と上の開始位置を設定しないと、IE は最終的にエラーをスローします。

お役に立てれば

于 2009-01-29T11:01:26.660 に答える
1

ポールが述べたように、メソッドを使用する場合。Animate () jQuery IE7 ブラウザは、プロパティ「位置」を内部的に認識しません。例えば

CSS ルール:

li p (bottom:-178px; color: white; background-color: # 4d4d4d; height: 100%; padding: 30px 10px 0 10px;)

jQuery でのアニメーションの実装:

$('li').hover(function(){

              $this = $(this);

              var bottom = '-45px'; //valor default para subir.

              if( $this.css('height') == '320px' ){bottom = '-115px';}

              $this.css('cursor', 'pointer').find('p').stop().find('.first').hide().end().animate({bottom: bottom}, {queue:false, duration:300});

      }, function(){

         var $this = $(this);

         var bottom = '-178px'; //valor default para descer

            if( $this.css('height') == '320px' ){bottom = '-432px';}

         $this.find('p').stop().animate({***position: 'absolute'***, bottom:bottom}, {queue:false, duration:300}).find('.first').show();

      });//fim do hover()

すべてのブラウザで機能するもの:

CSS ルール:

li p (position: absolute; left: 0; bottom:-178px; color: white; background-color: # 4d4d4d; height: 100%; padding: 30px 10px 0 10px;)

JQuery コード:

   $('li').hover(function(){

                 $this = $(this);

         var bottom = '-45px'; //valor default para subir.

              if( $this.css('height') == '320px' ){bottom = '-115px';}

              $this.css('cursor', 'pointer').find('p').stop().find('.first').hide().end().animate({bottom: bottom}, {queue:false, duration:300});

      }, function(){

         var $this = $(this);

         var bottom = '-178px'; //valor default para descer

            if( $this.css('height') == '320px' ){bottom = '-432px';}

         $this.find('p').stop().animate({bottom:bottom}, {queue:false, duration:300}).find('.first').show();

      });//fim do hover()

私の場合はこの方法で解決しました。

于 2010-03-31T12:47:09.897 に答える
1

なぜ IE がアニメーション化しないのかと 1 日考えた後、JQuery の一部のバージョンが以前のように機能しなくなっていることがわかりました。

これ：

$('#bs1').animate({
    "left": bs1x
}, 300, function() {
    // Animation complete.
});

この Jquery では動作しません: https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js

しかし、それは動作します: https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js

やったー古いバージョン！

于 2011-05-30T22:22:11.043 に答える
0

IEの期間を変更します。FFの場合の1/10にします。これにより、両方のブラウザーで同じ動作に近くなるはずです。

FF

$("#map").animate({"top": (pageY - 101) + "px"},{"easing" : "linear", "duration" : 200});

IE

$("#map").animate({"top": (pageY - 101) + "px"},{"easing" : "linear", "duration" : 20});

それを修正する必要があります。

于 2010-05-13T17:50:50.490 に答える
0

最近、animate（）が期待どおりに機能せず、IEがcssパディングをレンダリングするという問題が発生しました。プロパティはFireFoxとは異なります。

これは他の人にも起こったようで、私は自分のcssをハックしなければなりませんでした。代わりに、マージンと固定幅、およびその他のそのような恐ろしいIEハックを使用します。

于 2008-12-02T14:10:08.153 に答える
0

これは話題から外れているかもしれませんが、私は JQuery をいじっていますが、Javascript は初めてなので、IE 7 と IE 8 が const キーワードを認識しないことに気付きませんでした。それが私のJQueryの実行を妨げていたもので、アニメーションの問題ではありません..絶望的な魂を助けるかもしれないことを願っています. 男、古き良き AS3 と Flex に戻るのが待ちきれない..

http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/JSConstKeyword.htmlを参照して ください。

多くのための

于 2011-01-12T18:42:29.347 に答える
0

何が問題なのか正確にはわかりません...おそらく " display: none" にアニメーション化できませんか? これを試して：

toHide.animate({ height : 0 }, 1000, function() { $(this).hide(); });

overflow: hidden...考えてみると、コンテナが設定されていないという問題が他にもあるようです。

最善の方法は、車輪の再発明を避けることかもしれません: jQuery UI プラグインにはアコーディオンが組み込まれています。http://docs.jquery.com/UI/Accordion 名誉ある Mr Resig & Co は、あなたが遭遇するかもしれないどんなバグにも既に対処したと確信しています。

于 2008-12-02T13:50:41.077 に答える
0

isVisible クラスを切り替えるのではなく、jQuery セレクター :visible を使用できます。

また、アニメーションは機能的にはslideUp(1000)と同じようです。

于 2008-12-02T13:52:53.897 に答える