Question

我有一个脚本，当单击按钮时该按钮旋转，不透明度会改变，并且段落会滑动。我知道旋转不会发生，因为它使用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);
});

Answer 1

现在你已经提供了一个jsFiddle，当我运行你的代码时，我发现它在IE8中引发异常，因为style.setProperty()方法不存在。因此，切换功能的其余部分不会运行。如果我暂时评论setProperty()行，则.fadeTo()在IE8中有效。

那么，为什么不使用jquery的.css()方法而不是.setProperty()来设置这些样式参数，然后你不必担心浏览器的兼容性。

例如：

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

使用.fadeTo()代替.animate()，jQuery将使用旧版IE中不透明度设置的正确过滤器值。有关详细信息，请参阅jQuery doc on fadeTo()。

以下是使用适用于IE8的.toggle()和.fadeTo()的示例：http://jsfiddle.net/jfriend00/29JUB/

Answer 2

您在切换功能中使用切换功能，这将无法正常工作。请改为slideUp和slideDown。

正如jfriend00所说，你可以使用fadeTo属性轻松改变不透明度！

jquery动画在IE 8中不起作用

2 个答案: