jQuery color animation

$(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);
    });
});
<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>

Leave a Reply

Your email address will not be published. Required fields are marked *