jQuery animate opacity, remove div and getting invalid argument error within ie8

i got a list of logos, which have to be centered, so far so good. While accessing the page i've noticed that the pictures got an ugly jump while being positioned. So i've decided to set a div above those logos, drop opacity from 1 to 0 and finally remove it, so that their are clickable again.

Works very nice in Firefox, Opera, etc. But NOT within IE.

I switched over to the fullversion of jQuery. The debugger output looks like that:

if ( set ) {
 style[ name ] = value;
}

Here is the code i use and the html:

jQuery(window).load(function() {
 jQuery(".img_center").each(function(){
  var $l开发者_如何学Goi = jQuery(this), $img = $li.find('img');
  $img.css('padding-top', ($li.height() / 2) - ($img.height() / 2));
 });
 jQuery(".overlay_pic").animate({opacity: 0}, 2000, 'swing').queue(function(){
   jQuery(this).remove();
 });
});

Html:

<li class="img_center">
 <div class="overlay_pic"></div>
 <a href="">
  <img src="image/logos/countryclassics.jpg" border="0" alt="" />
 </a>
</li>
<li style="margin:0;" class="img_center">
 <div class="overlay_pic"></div>
 <a href="">
  <img src="image/logos/donna.jpg" border="0" alt="" />
 </a>
</li>

css:

.overlay_pic{
 width:inherit;
 height:inherit;
 background:white;
 opacity:1;
 position:absolute;
}

any ideas? :/

Edit: Ok, positioning is the source of that error. The calculation of the padding-top value jumps between correct value and bullshit bingo.

li height (half) normally -> 80, but sometimes just 8. Which results in padding-top -13px.

so, new calculation function for the win?!

Edit3: Ok, f*** off dynamic calculation...

SOLUTION

jQuery(window).load(function() {
var li = "80";
jQuery(".img_center").each(function(){
    var $li = jQuery(this), $img = $li.find('img');
    $img.css('padding-top', (li) - ($img.height() / 2));
});
jQuery(".overlay_pic").animate({opacity: 0}, 2000, 'swing').queue(function(){
        jQuery(this).remove();
});

});

I set the height static, without calculation. Thank god it's not a full dynamic ul li box...

I suspect that what's happening is your "height" computation is coming up with NaN, and IE doesn't like you setting that as the value for "padding-top". IE will often return "auto" as the value of "height". You might try changing that to "innerHeight" and see if it helps. (edit well now that I think of it the jQuery "height" method should always give you a number ... however I still think that the problem somehow lies with the setting of that CSS property. See what the debugger says about the value of "value" at that line inside jQuery.)

Debugging with the unminified jQuery is a great idea. In the debugger, you can click on the "Locals" tab on the right side of the debugger panel to see local variables, and use the "Stack" to walk up the stack and find locals in outer contexts. (Unfortunately, what the IE debugger can't do, as far as I can tell, is show variables in outer scopes that are captured as closures, but that probably wouldn't be a problem in this case.)

edit again — ah ok, thanks for posting the link. The problem is that you're trying to set "padding-top" to "-13px", which IE won't allow (and rightly so). That was clear in the debugger just by checking that "Locals" view. To avoid that, just use Math.max:

$img.css('padding-top', Math.max(0, ($li.height() / 2) - ($img.height() / 2)));