Animations failing in IE

Question

I am trying to create a jQuery plugin that will allow us to add entrance and exit animations in the mark up.

I have the entrance animations working in Chrome and Firefox, but they are having no effect in IE7 or IE8

The animation is performed by

animate({'top':posData.top+'px', 'left': posData.left+'px', 'opacity': 1}, speed)

or a varient of it (dependant on the required direction). posData is being logged to console so you can see the possible values. speed is set at the start of the plugin.

If you get any solution please post it here. It will help others who face same issue. Thanks. — Amar Palsapure, Feb 08 '12 at 04:08

score 1 · Answer 1 · edited May 23 '17 at 12:03

1

IE8 and IE7 doesn't support CSS2 - opacity, you will need filter: alpha(opacity=70);. Please read more details here.

In your jsFiddle, you are changing the opacity of div. As IE8 and IE7 doesn't support opacity, you don't see any animation.

EDIT

Check this this post on SO. It mentions about hasLayout which solved the problem.

Hope this helps you.

edited May 23 '17 at 12:03

Community

1
1

answered Feb 07 '12 at 13:07

Amar Palsapure

9,590
1
27
46

score 1 · Accepted Answer · answered Feb 08 '12 at 11:27

It was a combination these factors:

Elements needed to hasLayout
Needed to use filter: alpha(opacity=70); for opacity to work properly
Chrome doesn't seem to like uppercase letters in data attributes, which caused me to remove them in the JavaScript. Chrome and Firefox where happy with that, but IE insisted that the cases matched, so changing the data- attributes in the HTML to be lowercase, and making sure their JS counterparts matched.

score 0 · Answer 3 · answered Feb 07 '12 at 13:13

you can fix it, if you set the Opacity to 0 with jQuery .css():

http://jsfiddle.net/meo/UtbSY/1/

$('.animate').anim().css({"opacity": 0});

jQuery is using the right opacity filter for the browser in question.

Or you could use the filters in the CSS directly i guess, as mentioned by Amar... (But then the CSS Validation fails)

Animations failing in IE

3 Answers3