Opened 14 years ago

Closed 13 years ago

Last modified 13 years ago

#4279 closed bug (worksforme)

effects ignores duration in tr and td elements

Reported by: lordofloco Owned by:
Priority: major Milestone: 1.8
Component: ui.effects.core Version: 1.6rc6
Keywords: Cc:
Blocked by: Blocking:


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);

Change History (4)

comment:1 Changed 14 years ago by 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);

comment:2 Changed 14 years ago by 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.

comment:3 Changed 14 years ago by Scott González

Milestone: TBD1.8

comment:4 Changed 13 years ago by Scott González

Resolution: worksforme
Status: newclosed

Works for me, tested against 1.6rc6 and trunk.

Note: See TracTickets for help on using tickets.