most efficient way to do background colour change on hover with jquery 1.4+?

Question

I remember looking at this a year ago and there were some plugins and a jquery ui method, but it's always worth asking - what's changed?

what's the most efficient/lightweight method/plugin for fading background colors on hover?

Answer 1

I would say the answer hasn't changed, still the jQuery color plugin, unless you're including jQuery UI already, in which case you don't need the plugin anymore. The plugin is 3.6kb fully uncompressed, that's pretty small once gzipped (~1.45kb, even without minification).

Answer 2

The "proper" way would to be use browser built-in CSS transitions:

    #test {
      background-color: red;
        transition: background-color 1s;
        -webkit-transition: background-color 1s;
        -moz-transition: background-color 1s;
        -o-transition: background-color 1s;
    }
    #test:hover {
        background-color: blue;
    }

Supported currently (AFAIK) in Webkit browsers, Opera 10.5 and coming to Firefox 4.

There is a small jQuery plugin, which adds supprt for other browsers: http://weston.ruter.net/projects/jquery-css-transitions/ (however it hax not been updated for over a year and I haven't used it myself)

Answer 3

$(document).ready(function() { $("div:first").mouseover(function () { $(this).fadeTo("slow", 0.33); }); $("div:first").mouseout(function () { $(this).fadeTo("slow", 1); }); });