Need help figuring out how to make the backgrounds animate back to their originals.

animations.js

// Hover effects on services
var oldBG1 = $('.widItem.1').css('background-color');
var oldBG2 = $('.widItem.2').css('background-color');
var oldBG3 = $('.widItem.3').css('background-color');
$('.widItem').hover(
    function() {
        
        $(this)
            .addClass('widAnim')
            .animate({
                'background-color': '#272727'
            }, {
                queue: false
            });
        $(".fa", this)
            .addClass('faAnim')
            .animate({
                'font-size': '2em',
                color: '#fff',
                'margin-top':' -5px'
            }, {
                queue: false
            });
        $('div h2', this)
            .addClass('h2Anim')
            .animate({
                'font-size': '1.5em',
                color: '#fff',
            }, {
                queue: false
            });
        $('div p', this)
            .addClass('pAnim')
            .animate({
                opacity: 1,
                color: '#fff'
            }, {
                queue: false
            });
    },
    function() {
        if (this === $('.widItem:first-child')) {
            var replacementBG = oldBG1;
        } else if (this === $('.widItem:last-child')) {
            var replacementBG = oldBG3;
        } else {
            var replacementBG = oldBG2;
        }
        $(this)
            .addClass('widAnim')
            .animate({
                'background-color': replacementBG
            }, {
                queue: false
            });
        $(".fa", this)
            .addClass('faAnim')
            .animate({
                'font-size': '3em',
                color: '#000',
            }, {
                queue: false
            });
        $('div h2', this)
            .addClass('h2Anim')
            .animate({
                'font-size': '2.5em',
                color: '#000',
            }, {
                queue: false
            });
        $('div p', this)
            .addClass('pAnim')
            .animate({
                opacity: 0,
                color: '#000'
            }, {
                queue: false
            });
    }
);

elements.html

        <section class="wid">
            <h1>What I do</h1>
			      <p>I am developing my skills right now. I'm willing to work on projects, in any of the three areas below, that seem unique and interesting.  Contact me, and we'll see where we can go from there.</p>
            <section class="widItems">
                <div class="widItem 1">
                    <i class="fa fa-tint"></i>
                    <div class="widItemContainer">
                        <h2>Web <span>Design</span></h2>
                        <p>I'm learning to create visual style for web applications, both in the browser and in graphic design programs such as PhotoShop, Illustrator, and Fireworks.</p>
                    </div>
                </div>
                <div class="widItem 2">
                    <i class="fa fa-wrench"></i>
                    <div class="widItemContainer">
                        <h2>Web <span>Development</span></h2>
                        <p>I'm working on developing skills in front- and back-end environments. I'm especially interested in Node.js, new HTML5 APIs, CSS3, and Tent libraries. Oh, and QA.</p>
                    </div>
                </div>
                <div class="widItem 3">
                    <i class="fa fa-paragraph"></i>
                    <div class="widItemContainer">
                    <h2>Writing & <span>Social</span></h2>
                    <p>I'm an excellent writer. I need more experience writing in a variety of situations on a variety of topics. I like writing docs, bug reports, blog articles, and social media posts.</p>
                    </div>
                </div>
            </section>
        </section>