Problem with setting opacity by jQuery in IE7 and IE8

Question

I have this code:

<ul id='menu'>
  <li class="no1"> </li>
  <li class="no2"> </li>
  <li class="no3"> </li>
</ul>

Classes no1 - no3 just set background images for "li" tags. I use following code to set opacity of all li elements to 0.15 :

$('#menu > li').hover(function () {
      $('#menu > li').stop().animate({'opacity':'0.15'},"slow");
}

Everything is OK in Opera,Chrome,Safari and Firefox, but it doesnt work in IE7 and IE8 (and even maybe IE9)

I discovered I have to use style.filter property in IE but don't know how to exactly implement it in the code above. Any idea ?

score 0 · Answer 1 · answered May 23 '11 at 20:05

0

The opacity css type does not exist in those versions of IE,

so do: 'filter': 'alpha(opacity=15)' for IE

answered May 23 '11 at 20:05

Naftali

ChristianB · Answer 2 · 2011-05-23T20:32:54.887

0

Try:

$('#menu > li').stop().fadeTo("slow", 0.15);

edited May 23 '11 at 20:32

answered May 23 '11 at 20:08

ChristianB

check the answer from Eric on http://stackoverflow.com/questions/1375646/jquery-animate-opacity-doesnt-work-properly-on-ie – ChristianB May 23 '11 at 20:27

score 0 · Answer 3 · answered May 23 '11 at 20:12

0

css is filter:alpha(opacity=15); Not sure how the jquery syntax for assigning it will go though I guess:

 $('#menu > li').stop().animate({'opacity':'0.15'; 'filter':'alpha(opacity=15)'},"slow");

Not entirely sure though.

answered May 23 '11 at 20:12

AR.

Seems it doesn't work for image in background of LI tag. Any suggestion ? – chubbyk May 23 '11 at 20:21
try using comma then: $('#menu > li').stop().animate({'opacity':'0.15', 'filter':'alpha(opacity=15)'},"slow"); – AR. May 23 '11 at 20:25
Or try this: 'filter':"progid:DXImageTransform.Microsoft.Alpha(Opacity=15)" http://msdn.microsoft.com/en-us/library/ms532847%28v=vs.85%29.aspx – AR. May 23 '11 at 20:33

3 Answers3