JSFiddle - React, Tailwind, and code Playground

by Avi Algaly

HTML

<div id="control">
<label id="press">press</label>
<label id="reset">RESET</label>
</div>
<div id="debug"></div>
<table  id="tbl" border="1"...

CSS

#control{position:static;top:0;left:0}
#press ,#reset{border:solid 1px red;}
#tbl {width:100%;border:3px double gray;}
.class1 {background :url(http://wishtest.silvertive.com/WWS/images/50/45c4164d-34c9-46c6-8d4f-e27e70b54bbc.jpg) no-repeat 50% 0 ;min-width:50px;height:50px;}
.class2 {background :url(http://wishtest.silvertive.com/WWS/images/100/45c4164d-34c9-46c6-8d4f-e27e70b54bbc.jpg) no-repeat 50% 0}

.class3 {background :url(http://wishtest.silvertive.com/WWS/images/150/45c4164d-34c9-46c6-8d4f-e27e70b54bbc.jpg) no-repeat 50% 0}

JavaScript

$("#tbl td").addClass("class1");
  $("#debug").append($("#tbl").css("width"));
$("#reset").on("click", function() {
    $("#tbl").animate({
        width: "1500px",
        height: "1500px"
    })
})
$("#press").on("click", function() {
    $("#tbl").animate({
        width: "+=60" + "px",
        height: "+=60" + "px"
    },200);
    //alert(parseInt($("#tbl").css("width")))
    if (parseInt($("#tbl").css("width"))>1700){
        $("#tbl td").removeClass("class1");
        $("#tbl td").addClass("class2");
        $("#debug").html("background Image Changed");
    }
     if (parseInt($("#tbl").css("width"))>1900){
        $("#tbl td").removeClass("class2");
        $("#tbl td").addClass("class3");
        $("#debug").html("background Image Changed");
    }

    $("#debug").append($("#tbl").css("width"));
})