JSFiddle - React, Tailwind, and code Playground

http://stackoverflow.com/questions/7302824/animating-addclass-removeclass-with-jquery

by acturbo

HTML

<div id="test" class="blue">asdfasfsadf</div>

CSS

#test{
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    padding: 10px;    
}
.blue{
    color: #ffffff;
    background-color: blue;
    border: 3px solid transparent;

    width: 100px;
    height: 100px;
}
.red{
    background-color: red;
    border: 3px solid black;
    width: 150px;
    height: 150px;
}

JavaScript

$('#test').hover(function() {
    $(this).addClass('red');
}, function() {
    $(this).removeClass('red');
});