如何在鼠标悬停更改颜色时渐变放大，以及如何在鼠标屋中渐变缩小和渐变颜色

Question

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

(function ($) { "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);

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>

Answer 2

您似乎想要在两个图像之间转换，而不是更改单个图像的颜色，对吗？

这个FIDDLE (点击小爪子)使小爪子放大，然后淡出，然后被米老鼠取代。如果这是你要找的一般东西，你可以有两个图像，完全相同的大小，但不同的颜色，并在小提琴中玩大小。

JS

$( ".imagediv" ).click(function(){

  $( "#minion" ).animate({
                          height: 400,
                          width: 300
                          }, 3000,
                         function() {
                                 $( "#minion" ).animate({
                                                opacity: 0
                                                         }, 1000,
                          function() {
                                      $('.imagediv').html( $('.hiddendiv img').clone() );
                                      });
                                     });

});//end click