effects ignores duration in tr and td elements

[lordofloco]

When using .effect("highlight") jQuery UI ignores the duration parameter if the $ object refers to a tr or td element. When using .animate({backgroundColor}), there seems to be no effect at all. Have tried with variations of all of the examples below. Effect/highlight blips from the highlight color to the normal background color in about half a second. Animate or chained animate calls do not seem to work.

(#x is a tr element)

$("#x").effect("highlight", {color:"#96eecd"}, 2000);
$("#x").animate({backgroundColor: "#96eecd"}, 2000);
$("td", "#x").effect("highlight", {color:"#96eecd"}, 2000);
$("td", "#x").animate({backgroundColor: "#96eecd"}, 2000);

[lordofloco]

I forgot to mention yesterday that tr#x and its child td elements in the previous example have been dynamically added to the DOM in a .ajax callback function:

    // clear out the table
    $("tbody", "#viewrecordtable").empty();

    var newrows = '';

    // build table rows
    $.each(rows, function(index, row){        
        newrows += "<tr class=\"tablerow\" id=" + row.x + ">";
        newrows += "    <td class=\"rowcellborderstart\"><span>" + row.a + "</span></td>";
        newrows += "    <td class=\"rowcellborder\"><span>" + row.b + "</span></td>";
        newrows += "    <td class=\"rowcellborder\"><span>" + row.c + "</span></td>";
        newrows += "    <td class=\"rowcellborder\"><span>" + row.d + "</span></td>";
        newrows += "    <td class=\"rowcellborder\"><span>" + row.e + "</span></td>";
        newrows += "    <td class=\"rowcellborder\"><span>" + row.f + "</span></td>";
        newrows += "    <td class=\"rowcellborder\"><span>" + row.g + "</span></td>";
        newrows += "    <td class=\"rowcellborder\"><span>" + row.h + "</span></td>";
        newrows += "    <td class=\"rowcellborder\"><span>" + row.i + "</span></td>";
        newrows += "    <td class=\"rowcellborder\"><span>" + row.j + "</span></td>";
        newrows += "    <td class=\"rowcellborder\" style=\"text-align:center\"><img src=\"../images/edit.png\" alt=\"Edit Record\" style=\"cursor:pointer\" onclick=\"EditRecord(" + row.x + ");\" /></td>";
        newrows += "</tr>";
    });

    // attach new table rows to the table
    if (newrows.length != '') {
        $("tbody", "#viewrecordtable").append(newrows);
    }

[lordofloco]

I think I've narrowed down the problem with .effect to the DOM insert - adding a small delay of 100ms between the last inserted row and the start of the highlight animation seems to have fixed it. Animate still does not honor the duration setting however.

[Scott González]

Works for me, tested against 1.6rc6 and trunk.