javascript - 如何在鼠标悬停时改变颜色时逐渐放大，以及如何在鼠标房上逐渐缩小和褪色

Question

我想要实现的是逐渐缩放图像，同时随着新图像改变颜色。例如黑色的图像苹果和我有另一个红色的图像苹果。当您将鼠标悬停在黑苹果上时，它会逐渐改变颜色，变成红色。问题是当我将鼠标悬停时，它会立即更改为另一个图像，然后缩小。有任何想法吗？或者在 jquery 中有可能吗？

(函数($){ “使用严格”；

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

Answer 1

jQuery 不支持彩色动画。但是，jQuery UI 有一个处理彩色动画的插件(请在此处查看彩色动画的 UI 页面:http://jqueryui.com/animate/)。您需要先安装 jQuery UI 并使用您在此处找到的插件:https://github.com/jquery/jquery-color/

插件页面上也有一个很好的例子。

安装插件后，应该很容易设置颜色动画。下面的代码片段摘自插件文档，应该可以让您了解它是如何工作的:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: #bada55;
  width: 100px;
  border: 1px solid green;
}
</style>
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> //jQuery UI
<script src="jquery.color.min.js"></script> //plugin
</head>
<body>
<button id="go">Simple</button>
<button id="sat">Desaturate</button>
<div id="block">Hello!</div>
<script>
jQuery("#go").click(function(){
  jQuery("#block").animate({
      backgroundColor: "#abcdef"
  }, 1500 );
});
jQuery("#sat").click(function(){
  jQuery("#block").animate({
      backgroundColor: jQuery.Color({ saturation: 0 })
  }, 1500 );
});
</script>
</body>
</html>