ANIMATE - Div Background Color Changing

by bizamajig

HTML

<div id="mytd" class="class1">This is a test</div>

CSS

.class1 {
  background-color: red;
}

.class2 {
  background-color: green;
}
div { width:100px; }

JavaScript

$(function(){
    var $mytd = $('#mytd'), $elie = $mytd.clone(), os = $mytd.offset();
    
      // Create clone w other bg and position it on original
    $elie.toggleClass("class1, class2").appendTo("body").offset({top: os.top, left: os.left}).hide();
  
    $mytd.mouseover(function() {            
          // Fade original
        $mytd.fadeOut(3000, function() {
            $mytd.toggleClass("class1, class2").show();
            $elie.toggleClass("class1, class2").hide();            
        });
          // Show clone at same time
        $elie.fadeIn(3000);
    });
});