我如何逐渐放大，而改变鼠标悬停的颜色和逐渐缩小和褪色的颜色上的鼠标房子

我想要实现的是逐渐缩放图像，同时让它的颜色随新图像变化。例如，图像苹果与黑色，我有另一个图像苹果与红色。当鼠标悬停在黑苹果上时，它的颜色会逐渐变红。问题是，当我将鼠标悬停时，它会立即切换到另一个图像，然后缩小。什么好主意吗?或者在jquery中是可能的?

(function ($) {"使用严格";

    // 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);