JQuery: change the fade color backlight?

Question

Is it possible to change the color that the jQuery highlight effect fades?

Now it starts highlighting in yellow, then disappears to white and then disappears.

Ultimately, to highlight the background color yellow, and then just go to transparent.

Answer 1

I just ran into this behavior and in jQuery UI 1.8.9, it seems to be a bug.

For me, this was due to determining the background color of the element that I selected in CSS, instead of allowing it to be transparent by default.

If the background color is not set (i.e., it is transparent), if you have not changed the color of the backlight, then it will fade the element to yellow and then white, and then disappear.

However, if you set the background color of the element that you select, it will fade to yellow, and then to the original color of the element when you select it.

Answer 2

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

In the options object for the effect, you can change the default property of the color as you wish. My item is not set to color, and it is highlighted in bright yellow, and then fades to zero. I am using jQuery 1.8.1 and jQuery-UI.

Answer 3

Below is the source code for the highlight effect in the jQuery 1.8.9 user interface. It doesn't look like it should fade to white ... it should fade from yellow (# ffff99 or the color option you go through) to the original background color, which is cached in the animation variable. 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(); } }); }); }; 

Answer 4

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

With it, you can select an element and automatically return to transparency.