js:
$(function(){
$('.pulsate-color').click(function() {
$('.target').animate({
backgroundColor: '#ffffaa',
color: '#ff0000'
}, 500)
.animate({
backgroundColor: '#ffffff',
color: '#000000'
}, 500)
.animate({
backgroundColor: '#ffffaa',
color: '#ff0000'
}, 500)
.animate({
backgroundColor: '#ffffff',
color: '#000000'
}, 500);
});
$('.toggle-color').toggle(function() {
$('.target').animate({
backgroundColor: '#ccddff',
color: '#668822'
}, 500);
},function() {
$('.target').animate({
backgroundColor: '#aaffaa',
color: '#0000ff'
}, 500);
});
});
html:
<div class="form-actions btn-toolbar">
<span class="btn toggle-color">toggle color and bg color</span>
<span class="btn pulsate-color">pulsate color</span>
</div>
<div class="target"><strong>target; note: this example requires <a href="http://jqueryui.com/demos/animate/">jQuery UI</a> to work with color animation</strong></div>