8

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.

Shpigford
  • 24,748
  • 58
  • 163
  • 252

4 Answers4

5

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.

Ross
  • 511
  • 3
  • 12
  • Yeah, definitely need a fade-to-transparent here. – Shpigford Jun 02 '11 at 13:22
  • Did you try my suggestion and manually set the background color of the element you are trying to highlights? – Ross Jun 03 '11 at 01:53
  • 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. – Shpigford Jun 03 '11 at 13:58
  • 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. – Ross Jun 10 '11 at 01:22
1
$("#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.

bwinchester
  • 91
  • 1
  • 5
0

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

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

Ondrej Machulda
  • 998
  • 1
  • 12
  • 24
0

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();
                }
            });
    });
};
RwwL
  • 3,298
  • 1
  • 23
  • 24