逐渐改变颜色答案

【问题标题】：Gradually changing color逐渐改变颜色
【发布时间】：2010-12-17 13:09:06
【问题描述】：

屏幕左上角的标志如何随着翻车而逐渐变色？我认为它是在 jquery 中完成的。如果你不知道代码，你能给我指一个可以的教程吗？谢谢。

http://www.shopdev.co.uk/blog/

更新：谢谢大家，我已经发布了下面代码的工作版本，

<html>

    <head>            

        <script type="text/javascript" src="jquery.js"></script>

        <script type="text/javascript">

            $(document).ready(function(){

                // load the logo transition
                $("#logo span").css("opacity","0");
                $("#logo span").css("display","block");
                // logo animation
                $("#logo").hover(function() {
                    $("#logo span").stop().animate({opacity:1},'slow');
                }, function() {
                    $("#logo span").stop().animate({opacity:0},'slow');
                });


            });

        </script>

        <style type="text/css">
            #logo span{
                background: url(logo2.gif) no-repeat scroll center bottom;
                width:257px;
                height:75px;
                position:absolute;
            }
            img{
                border:0;
            }
        </style>

    </head>

    <body>

        <div id="logo"><a href="#"><span></span><img src="logo.gif"/></a></div>

    </body>

</html>

【问题讨论】：

在浏览器中使用“查看页面源代码”命令。在结果中查找词 opacity 或 animate。
如果您使用 jquery-ui 库，您可以使用更少的 html 来完成，请参阅我的答案。

标签： javascript jquery css rollover

【解决方案1】：

您是否尝试查看页面的源代码？这是不透明度的变化。

// load the logo transition
$("#logo span").css("opacity","0");
$("#logo span").css("display","block");
// logo animation
$("#logo").hover(function() {
    $("#logo span").stop().animate({opacity:1},'slow');
}, function() {
    $("#logo span").stop().animate({opacity:0},'slow');
});

因此，一张图片覆盖另一张图片，前面的图片逐渐淡入淡出。不是颜色变化。

注意代码上方的警告：

// whoah there...  This source code is copyright ShopDev.  By all means, use this website as a source of inspiration - just don't plagiarize! //

【讨论】：

“一个图像覆盖另一个图像”。不完全是，跨度不是图像；）
这是一张图片，而不是一张图片。 :-)
Firefox 和 Firebug 是查看它的最佳方式，顺便说一句。当鼠标悬停时，您实际上可以看到 HTML 的变化。

【解决方案2】：

将蓝色图像设置为 div 的背景。将 div 中的红色图像添加为普通图像，使其覆盖背景图像。你可以把它放在一个跨度中。悬停时，您可以更改红色图像的不透明度，以使蓝色图像显示出来。这很容易在 jQuery 中制作动画。在鼠标移出时，做相反的事情。

【讨论】：

【解决方案3】：

右键单击页面并点击“查看源代码”。您的答案在文件前 40 行的 JavaScript 块中。（你的 jQuery 假设是正确的）

【讨论】：

【解决方案4】：

它有两个标志图像。一蓝一红。默认显示红色。徽标图像具有兄弟跨度，其背景图像是蓝色徽标。 span 的不透明度为 0。当鼠标悬停在 span 上时，不透明度逐渐变为 1

【讨论】：

【解决方案5】：

可能是两张使用 css 不透明度“褪色”的图像。当一个是最大的不透明度时，另一个是最小的。过渡使我增加一种不透明度并降低另一种不透明度

【讨论】：

【解决方案6】：

Nosredna 是正确的，但如果你想要更简单的东西，你可以自己使用而不会受到抄袭的攻击；

首先，您需要一个 24 位 PNG 或带有透明部分的 gif 图像 - 该示例具有透明液体。

确保包含 jquery、jquery-ui（因为它添加了 CSS 背景颜色动画）和图像悬停效果

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(function(){

        $("#logo")
            .css({"backgroundColor: "#fff"})
            .hover(function() {
               $(this).stop().animate({backgroundColor: "#f00"}, 'slow');
            }, function() {
               $(this).stop().animate({backgroundColor: "#fff"}, 'slow');
            });

    });
</script>

然后在正文中使用正确的 ID 放入您的图像中

<img src="mylogo.png" id="logo" width="100" height="100" />

【讨论】：

从未在 IE6 中使用作为过滤器的 PNG 对其进行测试——我猜是不是？但如果你使用 GIF，我的测试就是这样做的。