how to animate table row

Question

I am not sure why is my table cell is not animating after click on a button. I want the whole row to animate into a different colour in specific time.

$("#buttonObserve").click(function() {
  $("#trl1").animate({
    backgroundColor: "#FFD801"
  }, 1000);
});

#tableLast {
  border-collapse: collapse;
  width: 80%;
}

#tableLast td,
#tableLast th {
  border: 1px solid #ddd;
  padding: 8px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tableLast" align="center">
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
  </tr>
  <tr id="trl1">
    <td id='tdl1'>1</td>
    <td id='tdl2'>2</td>
    <td id='tdl3'>3</td>
    <td id='tdl4'>4</td>
  </tr>
</table>

<button class="buttonObserve" id="buttonObserve"><img src="img/observe.png" height='100' width='150'></button>

Possible duplicate of [jQuery animate backgroundColor](https://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor) — Abhishek Pandey, Oct 31 '19 at 07:14

score 1 · Answer 1 · edited Oct 31 '19 at 09:47

1

<script src="https://code.jquery.com/color/jquery.color-2.1.2.js"></script>

You need to import this js file to animate color.

edited Oct 31 '19 at 09:47

Udhay Titus

5,761
4
23
41

answered Oct 31 '19 at 07:08

Masaaki Tamura

11
3

2

please change `http` -> `https`. And then, it's working. – Allen Haley Oct 31 '19 at 07:17

score 1 · Accepted Answer · 2019-10-31T07:20:53.860

2 Problems here:

First, you need to wrap javascript code inside $(document).ready.

Second, you need to import 'jquery.color.js' file.

Here's the working code.

$(document).ready(function(){
 $("#buttonObserve").click(function () {
  $("#trl1").animate({backgroundColor: "#FFD801"}, 1000);
 });
});

<html>
<head>
<style>
#tableLast{
    border-collapse: collapse;
    width: 80%;
}

#tableLast td, #tableLast th{
    border: 1px solid #ddd;
    padding: 8px;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.js"></script>

<table id="tableLast" align="center">
                       <tr>
                        <th>1</th>
                        <th>2</th>
                        <th>3</th>
                        <th>4</th>
                    </tr>
                    <tr id="trl1"> 
                        <td id='tdl1'>1</td>
                        <td id='tdl2'>2</td>
                        <td id='tdl3'>3</td>
                        <td id='tdl4'>4</td>
                    </tr>
                </table>

<button class="buttonObserve" id="buttonObserve"><img src="img/observe.png" height='100' width='150'></button>
</body>
</html>

how to animate table row

2 Answers2