Javascript $（'；'；）。如果交换的类包含color属性，则在IE8中出现switchClass抛出错误_Javascript_Jquery_Jquery Ui

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

javascript jquery jquery-ui

Javascript $（'；'；）。如果交换的类包含color属性，则在IE8中出现switchClass抛出错误,javascript,jquery,jquery-ui,Javascript,Jquery,Jquery Ui,我有以下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 - Switc

我有以下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>

第一个开关正常工作，但当第二个开关在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>


.开关格式{
背景颜色：黄色；
}
.switch-format1{
背景颜色：蓝色；
}
.开关格式2{
颜色：红色；
}
特效开关
setTimeout（函数（）{
警报（“开关1”）；
$（“#开关类”）.switchClass（'switch-format'，'switch-format1'，3000）；
}, 5000);
setTimeout（函数（）{
警报（“开关2”）；
$（“#开关类”）.switchClass（'switch-format'，'switch-format2'，3000）
}, 10000);
setTimeout（函数（）{
警报（“开关3”）；
$（“#开关类”）.switchClass（'switch-format2'，'switch-format'，3000）
}, 15000);

我已经在IE8中测试过了

有人能帮我解决这个问题吗

您可能设置了一个无效的边框颜色值，它会影响这些元素。您可以尝试查找它（如果存在），或者显式地为这些类设置一个新值：

border-color:transparent;

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

这是因为如果设置了颜色属性，则即使没有边框或滚动条基色设置，IE/FF也会为边框颜色和滚动条基色属性采用相同的值

我们可以通过在交换类中为这些属性设置显式值来解决这个问题。固定类别如下所示

    <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>


.开关格式{
背景颜色：黄色；
边界：透明；
滚动条基色：白色；
}
.switch-format1{
背景颜色：蓝色；
边界：透明；
滚动条基色：白色；
}
.开关格式2{
颜色：橙色；
边界：透明；
滚动条基色：白色；
}

不知何故，滚动条基色的透明值不起作用

我在中发布了此问题，他们已修复此问题。

请原谅我的建议，但请尝试“背景：”而不是“背景色”。jQuery网站上提供的示例在CSS中没有使用“-color”。最后，错误似乎与赋值fx.elem.style['borderColor']='NaNpx'有关；你的div在CSS中的其他地方设置了边框吗？尝试添加

边框颜色：透明到您的类。检查边框颜色，而不是边框。注意你的代码：fx.prop='borderColor'我已经检查了border color属性，它没有为所选的div设置。我发现，当jquery试图找出新旧样式的差异时，不知何故它检测到border-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>