Question

Currently everyone talks of two solutions:

1. jQuery UI plugin –> not feasible, because it uses too much space
2. jQuery Color (http://api.jquery.com/animate/) –> not feasible because I can’t actually get a link to the plugin to download

So my question is, what is the smallest plugin I can use to allow this effect with jQuery v1.7.2?

Answer 1

You can get the jQuery Color plugin from its GitHub repository.

span.value {
  background-color: #0f0;
}

$("span.value").animate({
  backgroundColor: "transparent"
}, 'slow');

See a live example using jQuery Color.

---

You can also make use of CSS3 transitions.

span.value {
  background-color: #0f0;
  -o-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -ms-transition-duration: 0.8s;
  -webkit-transition-duration: 0.8s;
  transition-duration: 0.8s;
}

.fade {
  background-color: transparent;
}

$("span.value").toggleClass("fade");

See a live example using CSS· transitions.