jQuery: Change highlight fade-to color?

问题:

Is it possible to change the color that the jQuery highlight effect fade's to?

Right now it starts the highlight at yellow, then fades to white and then fades out.

I ultimately what to highlight the background color with yellow, then just fade to transparent.

回答1:

I've just come across this behavior as well in jQuery UI 1.8.9, it seems to be a bug.

The way around it for me was to define the background color of the element I was highlighting in the CSS instead of letting it default to transparent.

If the background color isn't set (i.e. it is transparent), assuming you haven't changed the highlight color, then it will fade the element to yellow then to white and then fade out.

However, if you set the background color of the element you are highlighting it will fade to yellow then to the element's original color when you highlight it.

回答2:

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

In the options object for effect, you can change the default property of color to whatever you want. My element isn't set to a color and it highlights bright yellow, then fades back to nothing. I'm using jQuery 1.8.1 and jQuery-UI.

回答3:

Below is the highlight effect source code in jQuery UI 1.8.9. Doesn't look like it should fade to white... it should fade from yellow (#ffff99 or the color option you pass in) to the original background color, which is cached in the variable animation. Are you using 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();
                }
            });
    });
};

回答4:

Use jQuery Color plugin: https://github.com/jquery/jquery-color

With it you can highlight element and fade back to transparent properly.