jQuery fadeTo 到不同的颜色答案

【问题标题】：jQuery fadeTo to a different colorjQuery fadeTo 到不同的颜色
【发布时间】：2014-11-07 09:20:36
【问题描述】：

我正在尝试使用以下代码将其淡化为白色以外的其他颜色：

$(titleName).fadeTo("slow", 0.3, function () {
    $(titleName).attr('data-marked', 'yes');
});

如何使用上面的代码将其淡化为白色以外的其他颜色？

【问题讨论】：

fadeTo 动画不透明度，它是白色的原因是因为它后面的元素是白色的。要为颜色设置动画，您需要一个插件或 jQuery UI。

标签： jquery jquery-animate fadeout fadeto

【解决方案1】：

jQuery 不能为颜色设置动画，只有数字。 jQuery UI 可以。

如果不想包含 jQuery UI，可以使用 animate() 的“step”回调。例如：

var div, intVal, color;
div = $(".title")

div .css({
        myAttr: 0
    })
    .animate({
        myAttr: 255
    }, {
        duration: 5000,
        step: function (currentVal) {
            intVal = Math.round(currentVal);
            color = "rgb(" + intVal + ",0, 0)";
            div.css("background-color", color);
        }
    });

【讨论】：

【解决方案2】：

试试

$(titleName).animate({
    opacity: 0.3,
    color: 'red'
}, "slow", function () {
    $(this).attr('data-marked', 'yes');
});

演示：Fiddle 或 Background

注意：您需要使用jQuery UI/jQuery color 来启用字体颜色/背景颜色等颜色的动画

【讨论】：

褪色后仍然是白色的

【解决方案3】：

使用 JQuery 颜色动画插件： http://jqueryui.com/animate/

【讨论】：