CODEWITHSUNDEEP
jqueryinternet-explorerinternet-explorer-8
loriensleafs
loriensleafs

Reputation: 2255

jquery animation not working in IE 8

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

Upvotes: 0

Views: 967

Answers (2)

jfriend00
jfriend00

Reputation: 707356

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/

Upvotes: 1

Bram Vanroy
Bram Vanroy

Reputation: 28437

You are using a toggle function inside a toggle function, this won't work properly. Try slideUp and slideDown instead.

As jfriend00 said, you can use the fadeTo property for easy opacity changes!

Upvotes: 0

Related Questions