1

ポップアウト電卓を備えたサイトを開発しています。[Quote Calculator] ボタンをクリックすると、div がアニメーション化し、最初に高さ、次に幅が変化し、ページ上の他のすべての要素の上に配置されます。これは IE9、Chrome、FireFox、および Safari で動作しますが、残念ながら IE7/IE8 では動作しません。

「Quote Calculator」をクリックすると、高さのみがアニメーション化されてから停止します。ページ上に太い青い線が残り、幅はアニメーション化されません。

ここで同様の問題を検索しましたが、Googleでも役に立ちませんでした..問題は何ですか?

これが私のコードです：

$("#calcbutton").click(function () {
    $("#pnecontainer").show();
    $("#pnecontainer").animate({height: "550px", position: "absolute", top: "75px"});
    $("#pnecontainer").animate({width: "925px", left: "-635px"});
});

IE7/IE8 で動作させる方法はありますか、それともボックスが消えたり現れたりするなど、見た目があまり良くないもので解決する必要がありますか?

アップデート：

アニメーションをすべて 1 行で、または同じ関数の一部として実装しました。

興味深いことに、何らかの理由で、最初のクリックで同じ関数に 2 つのアニメーションを実装することはできませんが、次のように最小化関数で実装できます。

$("#minimizebutton").click(function () {
    $("#pnecontainer").animate({width: "-925px"});
    $("#pnecontainer").animate({height: "-550px", top: "-635px"});
    $("#pnecontainer").hide(100);
});

奇妙な..考えている人はいますか？（コメントのみでお願いします。回答は受け付けています）

4

3 に答える 3

1

IE7 ブラウザはプロパティ「位置」を内部的に認識せず、同時に 2 つのアニメーションを実行できません

于 2012-11-15T16:35:07.167 に答える
1

'position'IE7 はjqueryのプロパティを認識しません.animate()。

これを試して ：

CSS

#pnecontainer { position: absolute; }

JS

$("#calcbutton").click(function () {
    $("#pnecontainer").show();
    $("#pnecontainer").animate({height: "550px", top: "75px"});
    $("#pnecontainer").animate({width: "925px", left: "-635px"});
});
于 2012-11-15T16:27:57.390 に答える
1

コールバック関数を使用して、他のアニメーションが終了するまで幅をアニメーション化するのを待っているか、すべてのアニメーションを同じに配置したい.animate()

IE7/8 はアニメーションはおろか JS にも適していないため、同じ項目で同時に実行されている 2 つのアニメーションが問題の原因である可能性があります。

$("#pnecontainer").animate({height: "550px", position: "absolute", top: "75px"}
    , function () {
         $("#pnecontainer").animate({width: "925px", left: "-635px"});
});

または、すべてを 1 行でアニメーション化します

$("#pnecontainer").animate({height: "550px", position: "absolute", top: "75px", 
                            width: "925px", left: "-635px"});
于 2012-11-15T16:26:12.553 に答える