Question

I have a script that when a button is clicked that button rotates, the opacity changes and a paragraph slidetoggles. I know the rotate won’t happen because it uses the webkit features, but I’d still like the opacity to change and the paragraph to open and these should happen in IE 8 but for some reason doesn’t. Thanks in advance for any help.

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

Now that you’ve provided a jsFiddle, when I run your code, I see it throw an exception in IE8 because the style.setProperty() method does not exist. Thus the rest of the toggle function does not run. If I temporarily comment the setProperty() lines out, the .fadeTo() works in IE8.

So, why don’t use just use jquery’s .css() method instead of .setProperty() to set those style parameters and then you don’t have to worry about browsr compatibility.

For example:

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

---

Use .fadeTo() instead of .animate() and jQuery will use the proper filter value for the opacity setting in older versions of IE. See the jQuery doc on fadeTo() for more info.

Here’s an example using .toggle() and .fadeTo() that works in IE8: http://jsfiddle.net/jfriend00/29JUB/