#4279 closed bug (worksforme)

Opened March 05, 2009 09:10PM UTC

Closed July 21, 2009 04:16AM UTC

Last modified January 17, 2010 06:04AM UTC

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:
Description

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);
Attachments (0)
Change History (4)

Changed March 06, 2009 03:43PM UTC by lordofloco comment:1

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

Changed March 06, 2009 05:11PM UTC by lordofloco comment:2

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.

Changed March 25, 2009 04:36PM UTC by scottgonzalez comment:3

milestone: TBD → 1.8

Changed July 21, 2009 04:16AM UTC by scottgonzalez comment:4

resolution: → worksforme
status: new → closed

Works for me, tested against 1.6rc6 and trunk.