$ (''). switchClass выдает ошибку в IE8, если коммутируемый класс содержит свойство color - PullRequest
Новая
       8

$ (''). switchClass выдает ошибку в IE8, если коммутируемый класс содержит свойство color

3 голосов
/ 27 августа 2009

У меня есть следующие классы 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.

Может кто-нибудь помочь мне решить эту проблему

Ответы [ 3 ]

2 голосов
/ 27 августа 2009

Возможно, установлено недопустимое значение цвета границы, которое влияет на эти элементы. Вы можете попытаться выследить его (если он существует) или явно установить новое значение для этих классов: 

border-color:transparent;

Может быть добавлено в ваши классы для возможного устранения этой ошибки.

1 голос
/ 08 декабря 2009

Я опубликовал эту проблему на форуме jQuery , и они исправили эту проблему.

1 голос
/ 28 августа 2009

Это связано с тем, что если установлено свойство цвета, то IE / FF примет одно и то же значение для свойств border-color и scrollbar-base-color, даже если границы или scrollbar-base-set отсутствуют.

Мы можем решить эту проблему, задав явные значения для этих свойств в классах переключения. Фиксированные классы приведены ниже 

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

Каким-то образом значение прозрачности для полосы прокрутки-базовый цвет не работает

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...