JSFiddle - React, Tailwind, and code Playground

by techunter

HTML

<script src="http://www.mawk3y.net/jquery.animate-colors-min.js"></script>
<input type="button" id="togglemove" value="toggle div1 move" />

<input type="button" id="toggle" value="toggle" /> 

<div class="div1"></div>

CSS

.div1{
	width:200px; height:100px; background-color:#09C; position:absolute; top:40px; left:100px;	
}

JavaScript

$(document).ready(function(e) {

    $("#toggle").toggle(click1,click2);
    $("#togglemove").toggle(move1,move2);
        });
	
	function move1(){
		$(".div1").animate({"left":"200px"},1000);
	}
	
	function move2(){
		$(".div1").animate({"left":"100px"},1000);
	}
	function click1(){
		$("div.div1").animate({"width":"400px","border-radius":"10px",'background-color': '#400101','left':'200px'},1000);
	}
	function click2(){
		$("div.div1").animate({"width":"200px","border-radius":"0",'background-color': '#000000','left':'100px'},1000);
	}