jQuery 动画不透明度，删除 div 并在 ie8 中出现无效参数错误

Question

我得到了一个徽标列表，这些徽标必须居中，到目前为止一切顺利。 在访问该页面时，我注意到图片在定位时出现了丑陋的跳跃。 所以我决定在这些徽标上方设置一个 div，将不透明度从 1 降低到 0 最后将其删除，以便再次可以单击它们。

在 Firefox、Opera 等中工作得很好，但在 IE 中却不行。

我切换到了 jQuery 的完整版本。 调试器输出如下所示：

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

这是我使用的代码和 html:

jQuery(window).load(function() {
 jQuery(".img_center").each(function(){
  var $li = 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? ：/

编辑： 好吧，定位是该错误的根源。 padding-top 值的计算在正确值和废话宾果之间跳跃。

li 高度（一半）通常 -> 80，但有时只是 8。这会导致 padding-top -13px。

那么，新的获胜计算功能？！

编辑3： 好吧，去他妈的动态计算...

解决方案

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();
});

});

我将高度设置为静态，没有计算。感谢上帝，这不是一个完整的动态 ul li 盒子......

Answer 1

我怀疑发生的情况是你的“高度”计算得出了 NaN，而 IE 不喜欢你将其设置为“padding-top”的值。 IE 通常会返回“auto”作为“height”的值。您可以尝试将其更改为“innerHeight”，看看是否有帮助。 （编辑现在我想到了 jQuery“高度”方法应该总是给你一个数字......但是我仍然认为问题出在设置上查看调试器对 jQuery 中该行的“value”值的说明。）

使用未缩小的 jQuery 进行调试是一个好主意。在调试器中，您可以单击调试器面板右侧的“Locals”选项卡来查看局部变量，并使用“Stack”沿着堆栈向上查找并在外部上下文中查找局部变量。 （不幸的是，据我所知，IE 调试器不能做的是显示外部作用域中捕获为闭包的变量，但这在这种情况下可能不会成为问题。）

再次编辑 - 好吧，感谢您发布链接。问题是你试图将“padding-top”设置为“-13px”，这是 IE 不允许的（也是正确的）。只需检查“Locals”视图，调试器中就可以清楚地看到这一点。为了避免这种情况，只需使用 Math.max：

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