Changing background color problem in mootools

I have the following css classes:

.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;
  }

I am changing the background color and styles using the following code:

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();
}

In order to attract the user's attention, I have added that animation, but now what happens is if I change the class of the 'email' element using the following code:

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

the background color remains the same i.e; #FFFFFF, but the 'info_edit' class has background-color as '#F2F2F2'

When you're calling:

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

MooTools is manipulating the inline styles of that element. This type of styling overrides any style declared in a class (even if the class is added after the inline style is applied). You can see this using the "style" tab of Firebug or similar when you're inspecting an element.

To get around this, you could set the background-color to null or '' to explicitly remove the inline-style for background-color:

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