It allows you to define a gradient fill and have an element filled with a gradient. You can set the direction of the gradient (right-left or up-down) and the opacity of the gradient easily.

It uses the excellent jQuery JavaScript library developed by John Resig at http://jquery.com.

View the jquery.gradient.js file for information on settings and some simple examples.

How do you clear a gradient?

This seems to do it:

 $('.navbarItem').hover(
 function () {
  // Mouse over, first hide any gradients that have not been hidden.
  $('.navbarItem').children(".gradient").hide();

  // Turn on the gradient for this item.
  $(this).gradient({ from: 'dddddd', to: 'aaaaaa' });
 },
 function () {
  // Mouse out (this doesn't always get called), hide the gradient.
  $('.navbarItem').children(".gradient").hide();
 }
 );

What about this instead? I think your version will suffer from performance penalties.

$('.navbarItem').hover(
function () {
  // Mouse over, first hide previous gradients for all other navigation elements.
  $('.navbarItem').children(".gradient").hide();
  if ($(this).hasClass('hasGradient')) {
    // Show the gradient for this item.
    $(this).children('.gradient').show();
  }
  else {
    // Create a new gradient for this element
    $(this).addClass('hasGradient').gradient({ from: 'dddddd', to: 'aaaaaa' });
  }
},
function () {
   // Mouse out (this doesn't always get called - must be a bug), hide the gradient.
    $('.navbarItem').children(".gradient").hide();
}
);

Demo: http://www.parkerfox.co.uk/labs/gradientz
Source: http://davidwees.com/myblog/2007/08/gradient_jquery_plugin.html

Related Listings:

1. jQuery Gradient Plugin Adds a dynamically created configurable gradient to the background of...
2. CSS Gradient Effect Do you want to create fancy headings without rendering each...
3. Good Looking Floating Menu with jQuery Easing A floating effect using jquery.easing, animate top value and a...
4. Color picker plugin by Farbtastic with jQuery Farbtastic is a jQuery plug-in that can add one or...
5. Create a Thumbnail Gallery with Slick Heading and Caption Effect with jQuery This is a simple jQuery tutorial, but can be extremely...

Do you like this post?

Email: