All geek questions in one place

$ (''). ThrowClass error in IE8 if switch class contains color property

I have the following css classes

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

Using these classes, I want to do the animation in the next div

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

Below is my jQuery code that will use switchClass to switch classes in 5 second intervals

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 doesn't work in IE8, it works fine in FF3.

Error: "Invalid property value."

In IE, it fails on the next 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 problem

<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 tested this in IE8.

Can someone help me solve this problem?

+3
source share
3 answers

jQuery, .

+1

, , . ( ) :

border-color:transparent;

, .

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

- , ,

+1

Source: https://habr.com/ru/post/1716215/

More articles:


All Articles