Изменение проблемы с цветом фона в mootools

Question

У меня есть следующие классы CSS:

.info {
    padding-left: 15px;
    padding-bottom: 20px;
    display: block;}
.info_edit {
    background-color: #F2F2F2;
    padding-left: 15px;
    display: block;
    border-bottom: 1px solid #E9E9E9;
 }
.info_wait {
  padding-left: 15px;
padding-bottom: 20px;
display: block; 
background:url(../js/Assets/fbloader.gif) center center no-repeat #fff;
  }

Я изменяю цвет и стили фона, используя следующий код:

function emailEdit() {
    var request = new Request({
        url: '${email_edit}',
        onRequest: function() {
            $('email').set('html','');
            $('email').removeClass('info_edit');
            $('email').addClass('info_wait');
        },
        onSuccess: function(response) {
            $('email').removeClass('info_wait');
            $('email').addClass('info');
            $('email').set('html', response);
                    var myFx = new Fx.Tween('email', {
                        duration: 500,
                        transition: Fx.Transitions.Sine.easeInOut
                    });
                    myFx.start('background-color','#F2F2F2')
                        .chain(function(){
                            myFx.start('background-color','#FFFFFF');
                        }).chain(function(){
                            myFx.start('background-color','#F2F2F2');
                        }).chain(function(){
                            myFx.start('background-color','#FFFFFF');
                        }); 
        }
    }).send();
}

Чтобы привлечь внимание пользователя, яЯ добавил эту анимацию, но теперь происходит, если я изменю класс элемента 'email', используя следующий код:

$('email').removeClass('info');
$('email').addClass('info_edit');

цвет фона остается прежним, т.е.#FFFFFF, но класс 'info_edit' имеет цвет фона как '# F2F2F2'

Answer 1

Когда вы звоните:

myFx.start('background-color','#FFFFFF');

MooTools управляет встроенными стилями этого элемента. Этот тип стиля переопределяет любой стиль , объявленный в классе (даже если класс добавляется после применения встроенного стиля). Это можно увидеть на вкладке «Стиль» Firebug или аналогичной, когда вы проверяете элемент.

Чтобы обойти это, вы можете установить background-color на null или '', чтобы явно удалить встроенный стиль для background-color:

$('email').removeClass('info');
$('email').setStyle("background-color", ''); // <-- Remove inline style
$('email').addClass('info_edit');