jQuery: Change highlight fade-to color?

Question

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.

Pagel

Answer 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.

Ivory

Yeah, definitely need a fade-to-transparent here. – Pagel

Did you try my suggestion and manually set the background color of the element you are trying to highlights? – Ivory

As I mentioned in my original post and in my reply, I need fade-to-transparent. Setting the background color of the element doesn't help me because I need it to be transparent. – Pagel

Is the background a solid color or is it more complicated like a background image? It there is a parent wrapper that have a solid background color you can set the element you wish to highlight to have 'background: inherit;". It appears that jQueryUI doesn't know how to fade to transparent but only colors without an alpha. – Ivory

Answer 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.

Jillene

Answer 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();
                }
            });
    });
};

Leapfrog

I am indeed using 1.8.9 and it definitely fades from yellow to white to transparent. – Pagel

You'll probably need to post more of your context-specific code to get the most useful answers, then. – Leapfrog

Answer 4

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

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

Limited