how to use -ms-filter inside jquery animate

Question

i need to optimize my site for IE8. And it does not support opacity directly. It can be set using -ms-filter property. In my javascript am changing the opacity using jquery animate(). but how do i use it with -ms-filter

currently am giving this

$('.topbar img').animate({opacity:1, -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"},1500);

but its throwing a JS error. Invalid property obviously. Can anybody help me how to animate in IE8..? Help appreciated.

possible duplicate: http://stackoverflow.com/questions/1552020/jquery-animating-opacity-in-ie — feeela, Dec 21 '12 at 13:44

score 6 · Accepted Answer · edited May 23 '17 at 11:43

6

try using:

$('.topbar img').animate(
      {
       opacity:1, 
       '-ms-filter': 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'
//     ^quotes
      }
  ,1500);

See also...

Actually, using jquery, you shouldn't need the -ms-filter property. See this jsfiddle for an example

edited May 23 '17 at 11:43

Community

1
1

answered Dec 21 '12 at 13:35

KooiInc

119,216
31
141
177

Thanks.. it worked partially... Its changing the opacity. But not animating. Thanks anyways. – Harsh Reddy Dec 22 '12 at 07:07

score 0 · Answer 2 · answered Dec 21 '12 at 13:48

jQuery have a step() callback that gets triggered in every step of the animation.

$('.topbar img').animate({
  opacity: 1
},
{
  step: function(now, fx) {
    // Every step of the opacity animation we'll get the current 
    // opacity as the 'now' argument.
    var opacity = Math.round(now * 100);
    $(fx.elem).css('-ms-filter', 'progid:DXImageTransform.Microsoft.Alpha(Opacity=' + opacity + ')');
  }
});

how to use -ms-filter inside jquery animate

2 Answers2