jQuery：更改高亮淡入淡出颜色？答案

【问题标题】：jQuery: Change highlight fade-to color?jQuery：更改高亮淡入淡出颜色？
【发布时间】：2011-09-06 16:12:24
【问题描述】：

是否可以更改jQuery highlight effect 淡入淡出的颜色？

现在它以黄色开始突出显示，然后淡出为白色，然后淡出。

我最终用黄色突出背景颜色，然后淡出透明。

【问题讨论】：

标签： jquery jquery-ui highlight jquery-effects

【解决方案1】：

$("#id").effect( "highlight",{color:'#FFFF00',easing:'easeInElastic'},4000 );

在效果的选项对象中，您可以将颜色的默认属性更改为您想要的任何内容。我的元素没有设置颜色，它突出显示了亮黄色，然后又消失了。我正在使用 jQuery 1.8.1 和 jQuery-UI。

【讨论】：

【解决方案2】：

使用 jQuery Color 插件：https://github.com/jquery/jquery-color

使用它，您可以正确突出显示元素并淡化回透明。

【讨论】：

【解决方案3】：

我刚刚在 jQuery UI 1.8.9 中也遇到过这种行为，这似乎是一个错误。

对我来说，解决方法是定义我在 CSS 中突出显示的元素的背景颜色，而不是让它默认为透明。

如果没有设置背景颜色（即透明），假设你没有改变高亮颜色，那么它会将元素淡化为黄色，然后变为白色，然后淡出。

但是，如果您设置要突出显示的元素的背景颜色，则当您突出显示它时，它会淡化为黄色，然后变为元素的原始颜色。

【讨论】：

是的，这里肯定需要淡入透明。
您是否尝试过我的建议并手动设置要突出显示的元素的背景颜色？
正如我在原始帖子和回复中提到的，我需要淡入透明。设置元素的背景颜色对我没有帮助，因为我需要它是透明的。
背景是纯色还是像背景图片一样复杂？它有一个具有纯色背景颜色的父包装器，您可以将要突出显示的元素设置为“背景：继承；”。看起来 jQueryUI 不知道如何淡化为透明，而只知道没有 alpha 的颜色。

【解决方案4】：

下面是jQuery UI 1.8.9中的高亮效果源码。看起来它不应该褪成白色......它应该从黄色（#ffff99 或您传入的颜色选项）褪色为原始背景颜色，该背景颜色缓存在变量animation 中。你用的是 1.8.9 吗？

/*
 * jQuery UI Effects Highlight 1.8.9
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Effects/Highlight
 *
 * Depends:
 *  jquery.effects.core.js
 */
(function( $, undefined ) {

$.effects.highlight = function(o) {
    return this.queue(function() {
        var elem = $(this),
            props = ['backgroundImage', 'backgroundColor', 'opacity'],
            mode = $.effects.setMode(elem, o.options.mode || 'show'),
            animation = {
                backgroundColor: elem.css('backgroundColor')
            };

        if (mode == 'hide') {
            animation.opacity = 0;
        }

        $.effects.save(elem, props);
        elem
            .show()
            .css({
                backgroundImage: 'none',
                backgroundColor: o.options.color || '#ffff99'
            })
            .animate(animation, {
                queue: false,
                duration: o.duration,
                easing: o.options.easing,
                complete: function() {
                    (mode == 'hide' && elem.hide());
                    $.effects.restore(elem, props);
                    (mode == 'show' && !$.support.opacity && this.style.removeAttribute('filter'));
                    (o.callback && o.callback.apply(this, arguments));
                    elem.dequeue();
                }
            });
    });
};

【讨论】：

我确实在使用 1.8.9，它肯定会从黄色变为白色到透明。
那么，您可能需要发布更多特定于上下文的代码才能获得最有用的答案。