jQuery fadeTo effect applied to <tr>

Question

I want to add the fadeTo effect to a tr tag using jQuery. This should be possible, right? Here's my code:

if ($) {
    $(document).ready(function() {
        $("tr[id$='_trPendingRequest_Manager']").fadeTo("slow", 0.33);
    });
}

For whatever reason, the effect is not happening.

I decided to do a bit more testing and added a paragraph tag directly above the table containing this tr, and I was able to successfully apply the fadeTo effect to the paragraph tag. So, this leads me to think that one cannot apply the fadeTo effect to tr tags.

Anyone have a nugget of wisdom they'd not mind sharing with me as to why I can't get this to work?

EDIT: Here's the html of the table with the tr which I am trying to apply the effect to.

<table>
  <tr id="trPendingRequest_Manager" runat="server" style="display: none;" valign="middle">
    <td valign="middle">
      <asp:Image id="imgExc" runat="server" ImageUrl="~/Images/Mail_24x24.png" />
    </td>
    <td>&nbsp;</td>
    <td valign="middle">
      <asp:HyperLink ID="hypPendingRequest" runat="server" NavigateUrl="~/MyManagedRequests.aspx" Font-Bold="true" Font-Size="Medium" Font-Underline="false" ForeColor="Black">You have <asp:Label ID="lblRequestsNum" runat="server"></asp:Label>request(s) pending your action
       </asp:HyperLink>
    </td>
  </tr>
  <tr>... Removing the rest for brevity ... </tr>
</table>

Answer 1

Generally it's been my experience that tr elements can't be manipulated normally. For example, you can add a background color to tr elements (for zebra striping, say) but if you want a line between each tr "row" then you have to add the css border to the td elements under it or it won't seem to have any effect.

My guess is that this is something similar. You might have to try executing fadeTo on each child td element of the tr element in question... dunno, I admit I haven't tested anything.

Answer 2

It is working perfectly okay. If this is unique ID then you don't even need to specify tr or matching selector, simply this will do the work:

$(document).ready(){function(){
    $("#_trPendingRequestManager").fadeTo('slow','0.33');
});

EDIT:-

As I was suspecting the id comes from runat="server" item. You can use this to speed up things.

$(document).ready(function(){
    $("#<%=trPendingRequestManager.ClientID %>").fadeTo('slow','0.33');
});

I think starting _ was making it behave funny. For more on speeding up with using ClientID property read this post by Dave.

Also remove "display:none" this is the culprit!!!

just chain it to put opacity to 0 if you don't want to remove display:none

$("#<%=trPendingRequestManager.ClientID %>")
 .css('opacity','0').show() //make transparent and show
 .fadeTo('slow','0.33')

I found this here