Question

我有以下css类

.switch-format{
  background-color: yellow;
}
.switch-format1{
  background-color: blue;
}
.switch-format2{
  color: red;
}

使用这个类我想在下面的div上做一些动画

<div id="switch-class" class='switch-format' style="margin-top: 5px;">
  Effects - Switch
</div>

以下是我的jQuery代码，它将使用switchClass以5秒的间隔切换类

setTimeout(function() {
  alert('Switch 1');
  jq('#switch-class').switchClass('switch-format', 'switch-format1', 3000);
}, 5000);

setTimeout(function() {
  alert('Switch 2');
  jq('#switch-class').switchClass('switch-format1', 'switch-format2', 3000)
}, 10000);

setTimeout(function() {
  alert('Switch 3');
  jq('#switch-class').switchClass('switch-format2', 'switch-format', 3000)
}, 15000);

第一个开关运行正常但是当第二个开关发生时它在IE8中失败，它在FF3中工作正常。

错误是“无效的属性值”。

在IE中，它在以下行中失败

fx.elem.style[ fx.prop ] = fx.now + fx.unit;

具有以下值

fx.prop = 'borderColor';
fx.now = NaN;
fx.unit = 'px';
fx.elem.style[ fx.prop ] = '';
fx.elem is the div with id 'switch-class';

代码重新创建此问题

<html>
<head>
    <script type="text/javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
    <script type="text/javascript" src ="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
</head>
<body>
    <style type="text/css">
        .switch-format{
            background-color: yellow;
        }
        .switch-format1{
            background-color: blue;
        }
        .switch-format2{
            color: red;
        }
    </style>

    <div id="switch-class" class='switch-format' style="margin-top: 5px;">Effects - Switch</div>

    <script type="text/javascript">
        setTimeout(function() {
                    alert('Switch 1');
                    $('#switch-class').switchClass('switch-format', 'switch-format1', 3000);
                }, 5000);

        setTimeout(function() {
                    alert('Switch 2');
                    $('#switch-class').switchClass('switch-format', 'switch-format2', 3000)
                }, 10000);

        setTimeout(function() {
                    alert('Switch 3');
                    $('#switch-class').switchClass('switch-format2', 'switch-format', 3000)
            }, 15000);
    </script>    
</body>
</html>

我在IE8中测试了这个。

任何人都可以帮我解决这个问题

Answer 1

您可能设置了影响这些元素的无效边框颜色值。您可以尝试将其搜索（如果存在），或者为这些类显式设置新值：

border-color:transparent;

可以添加到您的类中以删除此错误。

Answer 2

这是因为如果设置了颜色属性，那么即使没有边框或滚动条基集，IE / FF也会对border-color和scrollbar-base-color属性采用相同的值。

我们可以通过在切换类中为这些属性设置显式值来解决此问题。固定班级如下：

    <style type="text/css">
        .switch-format{
            background-color: yellow;
            border: transparent;
            scrollbar-base-color: white;
        }
        .switch-format1{
            background-color: blue;
            border: transparent;
            scrollbar-base-color: white;
        }
        .switch-format2{
            color: orange;
            border: transparent;
            scrollbar-base-color: white;
        }
    </style>

滚动条基色的透明值无法正常工作

Answer 3

我已在jQuery forum发布此问题，他们已解决此问题。

$（''）。如果切换的类包含color属性，则在IE8中抛出switchClass错误

3 个答案: