I've the following css classes
.switch-format{
background-color: yellow;
}
.switch-format1{
background-color: blue;
}
.switch-format2{
color: red;
}
Using this classes I want to do some animation on the following div
<div id="switch-class" class='switch-format' style="margin-top: 5px;">
Effects - Switch
</div>
Following is my jQuery code which will use switchClass to switch the classes at 5 sec interval
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);
The first switch happens fine but when the second switch happens it fails in IE8, it works fine in FF3.
The error is 'Invalid Property Value'.
In IE it fails in the following line
fx.elem.style[ fx.prop ] = fx.now + fx.unit;
with the following values
fx.prop = 'borderColor';
fx.now = NaN;
fx.unit = 'px';
fx.elem.style[ fx.prop ] = '';
fx.elem is the div with id 'switch-class';
Code To Recreate this issue
<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>
I've tested this in IE8.
Can anyone help me to solve this problem