Change checkbox color with click of button to fade from top to bottom one at a time

How can I create a "progress bar" style (almost as if it's loading) fade from top to bottom from the original color into the new color for these checked checkboxes one at a time in their perspective checked order and not all at once after clicking the button?

My CSS transition is not working.

Here is an example of my code. I hope I was able to explain it well enough.

sidenote for some reason, it does not want to except my javascript, even though it is running correctly on my IDE.

$("button").click(function() {
  $("table").toggleClass("alternative");
});

table.example1, table.example1 th, table.example1 td {
    border: 3px solid grey;
    max-width: 200px;
}

input[type=checkbox] {
    display:none;
}

input[type=checkbox] + label {
    display:inline-block;
    padding: 6px 60px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    color: white;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-color: transparent;
    background-repeat: repeat-x;
}

input[type=checkbox]:checked + label{
    background-color: #3e618b;
    outline: 0;
}
.alternative input[type=checkbox]:checked + label{
    -moz-transition: height .10s ease-in;
    -o-transition: height .10s ease-in;
    -webkit-transition: height .10s ease-in;
    transition: height .10s ease-in;
    background-color: #5093e4;
}

<script src="http://ift.tt/1oMJErh"></script>
<table class="example1" style="width:40%;" align='center'>
<tr>
    <td>
        <input type="checkbox" id="chk1" name="chk" value="1">
          <label for="chk1">&nbsp; 1</label>
    </td>
    <td>
        <input type="checkbox" id="chk2" name="chk"value="2">
        <label for="chk2">&nbsp; 2</label>
    </td>
</tr>

    <tr>
        <td>
            <input type="checkbox" id="chk3" name="chk" value="3">
              <label for="chk3">&nbsp; 3</label>
        </td>
        <td>
            <input type="checkbox" id="chk4"name="chk" value="4">
            <label for="chk4">&nbsp; 4</label>
        </td>
    </tr>

    <tr>
        <td>
            <input type="checkbox" id="chk5"name="chk"value="5">
            <label for="chk5">&nbsp; 5</label>
        </td>
        <td>
            <input type="checkbox" id="chk6"name="chk"value="6">
            <label for="chk6">&nbsp; 6</label>
        </td>
    </tr>

    <tr>
        <td>
            <input type="checkbox" id="chk7"name="chk"value="7">
            <label for="chk7">&nbsp; 7</label>
        </td>
        <td>
            <input type="checkbox" id="chk8"name="chk"value="8">
            <label for="chk8">&nbsp; 8</label>
        </td>
    </tr>
</table>   

<button>Changes checked checkbox color</button>