JSFiddle - React, Tailwind, and code Playground

by webvitaly

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<div class="form-actions btn-toolbar">
    <button class="btn toggle-color">toggle color and bg color</button>
    <button class="btn pulsate-color">pulsate color</button>
</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>

JavaScript

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