I have the following unique css classes
.swap-format{
background-color: green;
}
.swap-format1{
background-color: orange;
}
.swap-format2{
color: purple;
}
Using these classes, I want to create an animation on the given div
<div id="swap-class" class='swap-format' style="margin-top: 10px;">
Effects - Swap
</div>
This is my custom jQuery code which will use swapClass to alternate between the classes at a 5 second interval
setTimeout(function() {
alert('Swap 1');
jq('#swap-class').swapClass('swap-format', 'swap-format1', 3000);
}, 5000);
setTimeout(function() {
alert('Swap 2');
jq('#swap-class').swapClass('swap-format1', 'swap-format2', 3000)
}, 10000);
setTimeout(function() {
alert('Swap 3');
jq('#swap-class').swapClass('swap-format2', 'swap-format', 3000)
}, 15000);
The initial swap works perfectly, however, when the second swap occurs, it fails in IE8. It functions properly in FF3.
The error encountered is 'Invalid Property Value'.
In IE, the failure occurs in the following line of code
fx.elem.style[ fx.prop ] = fx.now + fx.unit;
The values being passed are as follows
fx.prop = 'borderColor';
fx.now = NaN;
fx.unit = 'px';
fx.elem.style[ fx.prop ] = '';
fx.elem is the div with id 'swap-class';
To recreate this issue, use the following code
<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">
.swap-format{
background-color: green;
}
.swap-format1{
background-color: orange;
}
.swap-format2{
color: purple;
}
</style>
<div id="swap-class" class='swap-format' style="margin-top: 10px;">Effects - Swap</div>
<script type="text/javascript">
setTimeout(function() {
alert('Swap 1');
$('#swap-class').swapClass('swap-format', 'swap-format1', 3000);
}, 5000);
setTimeout(function() {
alert('Swap 2');
$('#swap-class').swapClass('swap-format', 'swap-format2', 3000)
}, 10000);
setTimeout(function() {
alert('Swap 3');
$('#swap-class').swapClass('swap-format2', 'swap-format', 3000)
}, 15000);
</script>
</body>
</html>
I have thoroughly tested this in IE8.
Could someone assist me in resolving this issue?