JQuery：animate（）がIEで期待どおりに機能しない

StackOverflow https://stackoverflow.com/questions/333911

質問

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

==＆gt; hhttp：//neu.emergent-innovation.com/

次の機能がIE 7では機能しないが、Firefoxでは完全に機能するのはなぜですかanimate-functionにバグはありますか？

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が正しく動作することです。 -しかし、それは何も変わりませんでした。

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

役に立ちましたか？

解決

メソッドを使用するとき、ポールが述べたように。 Animate（）jQuery IE7ブラウザは、プロパティ 'position'を内部的に認識しません。例

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()

私の場合、この方法で解決されました。

他のヒント

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

IEの要素の属性をアニメーション化する場合、CSSに、変更する属性の開始点があることを確認する必要があります。これはSafariにも適用されます。

例として、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; }

左に＆amp;を入れない場合一番上の開始位置IEは最終的にエラーをスローします。

これが役立つことを願って

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

古いバージョンです！

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

また、アニメーションは機能的にslideUp（1000）と同じように見えます。

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

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

これはトピックから外れているかもしれませんが、私はJQueryで遊んでいますが、Javascriptが初めてなので、IE 7とIE 8がconstキーワードを認識しないことに気付きませんでした。それが私のJQueryの実行を妨げていたのは、アニメーションの問題ではありませんでした。私はAS3とFlexの優れた機能に戻るのが待ちきれません。

参照 http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/JSConstKeyword.html

その他

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});

修正する必要があります。

問題が正確に何なのかわかりません...おそらく、「 display：none ＆quot;」にアニメートすることはできません。 ？これを試してください：

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

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

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top