Question

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

（function（$）{ ＆＃34;使用严格的＆＃34 ;;

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

如何在鼠标悬停和逐渐缩小时更改颜色以及在鼠标室上逐渐淡出颜色时逐渐放大

2 个答案: