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

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