Question

我环顾四周学习如何使用jquery淡化背景颜色，但所有答案都会导致jquery color plugin，我不想使用它。我想要一个纯粹的jquery代码来做它但似乎无法找到它。我的工作地点非常不愿意为他们的网站使用插件，所以我必须使用纯粹的jquery。

我不是jquery的专家，但这是我提出的，我认为这不是解决方案：

$('#fade').css('background-color', '#2CAEA8').animate({'opacity': 0});

我只想让背景从任何颜色淡化为白色。请有人给我指路吗？谢谢。

Answer 1

为什么不自己编写代码？

您知道FFFFFF是白色的，可以解释为RGB 255 255 255

例如，你有一个rgb（从十六进制转换）值100 100 100然后你只需运行一个循环并递增这些值直到它们达到255，并在每次迭代时将背景颜色设置为匹配。

Answer 2

HTML

<html>
    <body>
        <div id="fade">
            some text goes here
        </div>
    </body>
</html>

jquery的

$(document).ready(function() {

    $('#fade').css('backgroundColor', $('#fade').css('backgroundColor')).animate({
        backgroundColor: '#ffffff'
    }, 5000);

});

CSS

#fade{
    background:#ff0;
}

Answer 3

我想我已经找到了你的问题答案！这是live demo，您也可以查看以下代码 -

HTML -

<html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    </head>
    <body>
        <div id="fade">
            My Friend Shaoz!
        </div>
    </body>
</html>

CSS -

div#fade
{
 color: #333;
 background: #ddd;
 padding: 5px 5px;
 font-family: segoe ui;
 font-size: 12px;
 font-weight: bold;
 border: 2px solid #333;
}

Jquery -

$(document).ready(function(){
    var fadeobjid = 'fade';
    var fadetinobg = '#fff';
    var fadeouttobg = '#ddd';
    var fadeintotextcolor = '#000';
    var fadeouttotextcolor = '#333';
    var fadeinanimatespeed = '300';
    var fadeoutanimatespeed = '250';

    $('#' + fadeobjid).mouseover(function () {
        $(this).animate({
            'backgroundColor' : fadetinobg,
            'color' : fadeintotextcolor
        }, fadeinanimatespeed, 'linear', function() { });
    });
    $('#' + fadeobjid).mouseout(function () {
        $(this).animate({
            'backgroundColor' : fadeouttobg,
            'color' : fadeouttotextcolor
        }, fadeoutanimatespeed, 'linear', function() { });
    });
});

问题是你需要jQuery-UI才能做到这一点。这就是你所需要的一切！

希望这会对你有帮助！

Answer 4

＆＃34;黄色淡出＆＃34;的简单/原始脚本，除了jquery本身之外没有插件。只需在计时器中使用rgb（255,255，highlightcolor）设置背景：

<script>

    $(document).ready(function () {
        yellowFadeout();
    });

    function yellowFadeout() {
        if (typeof (yellowFadeout.timer) == "undefined")
            yellowFadeout.timer = setInterval(yellowFadeout, 50);
        if (typeof (yellowFadeout.highlightColor) == "undefined")
            yellowFadeout.highlightColor = 0;
        $(".highlight").css('background', 'rgb(255,255,' + yellowFadeout.highlightColor + ')');
        yellowFadeout.highlightColor += 10;
        if (yellowFadeout.highlightColor >= 255) {
            $(".highlight").css('background','');
            clearInterval(yellowFadeout.timer);
        }
    }
</script>

没有颜色插件的jquery颜色褪色

4 个答案: