JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://plugins.jquery.com/files/jquery.color.js.txt"></script>
<div id="somediv">
    <span class="foo">
        foo <em>bar</em> foo
    </span>
</div>

<p>
    <a href="#" id="direct">change directly</a>
    <a href="#" id="slowly">change slowly</a>
</p>

CSS

#somediv .foo em {
    color: #D00;
}

#somediv .bar em {
    color: #080;
}

JavaScript

$('#direct').click(function () {
    $('.foo').removeClass('foo').addClass('bar');
    return false;
});


$('#slowly').click(function () {
    var new_color = $('<div id="somediv"><span class="bar"><em>')
        .find('em').css('color');
    $('#somediv .foo em').animate({color: new_color}, 1000,
        function() {
            $('.foo').removeClass('foo').addClass('bar');
    });
    return false;
});