Как сделать постепенное увеличение при изменении цвета при наведении мыши и постепенное уменьшение масштаба и исчезновение цвета при использовании мыши

То, что я пытаюсь достичь, постепенно увеличивает изображение при изменении цвета с новым изображением. Например, изображение яблока с черным цветом, и у меня есть другое изображение с красным цветом. Когда вы наведите курсор мыши на черное яблоко, он постепенно изменит цвет, превратив его в красный. Проблема в том, что когда я наводил указатель мыши, он мгновенно переходит на другое изображение, а затем уменьшает масштаб. Есть идеи? или это возможно в jquery?

(функция ($) {"use strict";

    // Start Documentation
    $(document).ready(function () {


        //  About Us Title Text

        $('.about_us_img,.about_us_txt').mouseover(function () {
            {

                $('.about_us_img').animate({
                    width: "216px"
                }, 400);
                $('.about_us_txt').css({
                    color: '#49968b'
                });

                $('.about_us_txt').animate({
                    fontSize: newSizeAU
                }, 300);

                $('.about_us_img').attr("src", AboutHut);
                $(this).fadeTo('300', 0.9);

            }
        });

        $('.about_us_img,.about_us_txt').mouseout(function () {
            {

                $('.about_us_img').animate({
                    width: "196px"
                }, 400);
                $('.about_us_txt').css({
                    color: '#000'
                });

                $('.about_us_txt').animate({
                    fontSize: oldSizeAU
                }, 300);
                $(this).fadeTo('300', 1);
                $('.about_us_img ').attr("src", OrigHut);

            }
        });
        var oldSizeAU = parseFloat($('.about_us_txt').css('font-size'));
        var newSizeAU = oldSizeAU * 1.1;


        //Our Project



        $('.our_project_img,.our_project_txt').mouseover(function () {
            {

                $('.our_project_img').animate({
                    width: "216px"
                }, 400);
                $('.our_project_txt').css({
                    color: '#b26c64'
                });

                $('.our_project_txt').animate({
                    fontSize: newSizePR
                }, 300);
                $('.our_project_img').attr("src", ProjectHut);
                $(this).fadeTo('300', 0.9);
            }
        });

        $('.our_project_img,.our_project_txt').mouseout(function () {
            {

                $('.our_project_img').animate({
                    width: "196px"
                }, 400);
                $('.our_project_txt').css({
                    color: '#000'
                });

                $('.our_project_txt').animate({
                    fontSize: oldSizePR
                }, 300);
                $(this).fadeTo('300', 1);
                $('.our_project_img').attr("src", OrigHut);

            }
        });
        var oldSizePR = parseFloat($('.our_project_txt').css('font-size'));
        var newSizePR = oldSizePR * 1.1;


        //My Profile



        $('.my_profile_img,.my_profile_txt').mouseover(function () {
            {
                $(this).fadeTo('300', 0.9);
                $('.my_profile_img').animate({
                    width: "216px"
                }, 400);
                $('.my_profile_txt').css({
                    color: '#8db262'
                });

                $('.my_profile_txt').animate({
                    fontSize: newSize
                }, 300);
                $('.my_profile_img').attr("src", ProfileHut);

            }
        });

        $('.my_profile_img,.my_profile_txt').mouseout(function () {
            {

                $('.my_profile_img').animate({
                    width: "196px"
                }, 400);
                $('.my_profile_txt').css({
                    color: '#000'
                });

                $('.my_profile_txt').animate({
                    fontSize: oldSize
                }, 300);
                $(this).fadeTo('300', 1);
                $('.my_profile_img').attr("src", OrigHut);

            }
        });






        var oldSize = parseFloat($('.my_profile_txt').css('font-size'));
        var newSize = oldSize * 1.1;
        /****

$('.my_profile_img,.my_profile_txt').mouseover(function () {


    $('.my_profile_img,.my_profile_txt').fadeTo('slow', 0.8, function () {
        $('.my_profile_img').animate({
            width: newWidthSize
        }, 500);
        $('.my_profile_txt').animate({
            fontSize: NewSize
        }, 300);


        $(this).fadeTo('200', 1);
        $('.my_profile_img').attr('src', ProfileHut);


    });
});

$('.my_profile_img,.my_profile_txt').mouseout(function () {
    $('.my_profile_img').animate({
        width: oldWidthSize
    }, 500);
    $('.my_profile_txt').animate({
        fontSize: oldSize
    }, 300);

    $(this).fadeTo('300', 0.9, function () {

        $('.my_profile_img').attr('src', OrigHut);
        $(this).fadeTo('300', 1);
    });

});

var oldWidthSize = parseFloat($('.my_profile_img').css('width'));
var newWidthSize = oldWidthSize * 1.1;

**/


        // End Ready Documentation
    });


})(jQuery);