0

ボタンをクリックするとそのボタンが回転し、不透明度が変化して段落がスライドするスクリプトがあります。Webkit機能を使用しているため、回転が発生しないことはわかっていますが、不透明度を変更して段落を開く必要があります。これらはIE 8で発生するはずですが、何らかの理由で発生しません。助けてくれてありがとう。

var effects_of_yoga_2010_INFO = {
    "-webkit-transition": "webkit-transform 0.25s ease-in-out"
};
$("#effects_of_yoga_2010_INFO").css(effects_of_yoga_2010_INFO);


var effects_of_yoga_2010_DEG = 0;

$("#effects_of_yoga_2010_INFO").toggle(function() {
$("p#effects_of_yoga_2010_TEXT").slideDown("250");
effects_of_yoga_2010_DEG += 45;
effects_of_yoga_2010_INFO.style.setProperty('-webkit-transform', 'rotateZ(' +   
effects_of_yoga_2010_DEG + 'deg)');
$("#effects_of_yoga_2010_INFO").fadeTo("250", 0.65);
}, function() {
$("p#effects_of_yoga_2010_TEXT").slideUp("250");
effects_of_yoga_2010_DEG += 45;
effects_of_yoga_2010_INFO.style.setProperty('-webkit-transform', 'rotateZ(' +  
effects_of_yoga_2010_DEG + 'deg)');
$("#effects_of_yoga_2010_INFO").fadeTo("250", 0.3);
});
4

2 に答える 2

1

jsFiddleを提供したので、コードを実行すると、style.setProperty()メソッドが存在しないため、IE8で例外がスローされることがわかります。したがって、残りのトグル機能は実行されません。一時的にsetProperty()行をコメントアウトすると.fadeTo()、IE8で動作します。

.css()したがって、これらのスタイルパラメータを設定する代わりに、jqueryのメソッドを使用しないのはなぜ.setProperty()ですか。そうすれば、ブラウザの互換性について心配する必要はありません。

例えば:

$("#effects_of_yoga_2010_INFO").css("-webkit-transition", "-webkit-transform 0.25s ease-in-out");

.fadeTo()の代わりに使用すると.animate()、jQueryは古いバージョンのIEの不透明度設定に適切なフィルター値を使用します。詳細については、fadeTo()のjQueryドキュメントを参照してください。

IE8で動作するを使用.toggle()した例を次に示します。http: //jsfiddle.net/jfriend00/29JUB/.fadeTo()

于 2012-10-03T15:10:48.320 に答える
0

トグル関数内でトグル関数を使用していますが、これは正しく機能しません。代わりに試してみてくださいslideUpslideDown

jfriend00が言ったように、fadeToプロパティを使用して、不透明度を簡単に変更できます。

于 2012-10-03T15:13:09.847 に答える