animate not working in IE

animate not working in IE

Hey folks,

I have a big problem, here is the sample of code:

  1. <ul>
  2. <li>
  3. <a href="#"> <img src="#" /> </a>
  4. <div class="info">
  5. <div><a href="#"> <img src="#" /> </a></div>
  6. </div>
  7. </li>
  8. </ul>
So, normaly the div.info element is with css: display:none; And there is displaying only "a" element.
But i have a little code of jquery who makes the div.info element showup when the mouse over on the "li" element. And code is working as i expecting, but not in the IE.

  1. var pic = $('ul li');
  2. pic.hover(function(){
  3. $('div.info', this).stop().animate({opacity:'0'}, 600, function(){ $(this).css({display:'block'}).animate({opacity:'1'}, 500) })
  4. }, function() {
  5. $('div.info', this).stop().animate({opacity:'0'}, 200)
  6. })
So, can anybody help me, to make this work on ie?