jquery - On click, change opacity and fade in hidden div -

jquery - On click, change opacity and fade in hidden div -

i wondering efficient way perform this. have tried many methods posted on here had no results.

i have table row, when clicked, want alter opacity of row , fade in 2 buttons.

<tr id="row1"> <td>text</td> <td>text</td> <td><div id="hidden">text</div></td>

i'm using tables info reasons. i'm wondering how create when click #row1, fades opacity , fades in id #hidden.

demo: http://jsfiddle.net/4utt9/

one way utilize animte , fadein. isn't clear if want hidden buttons have same new opacity row when appear. can alter in css.

$(document).ready(function() { $('tr').on('click', function(event) { var $row = $(this); $row.animate({ opacity: 0.5}, function() { $row.find('.hidden').fadein(); }); }); });

if want hidden part not partially transparent, can this:

demo: http://jsfiddle.net/4utt9/6/

html:

<table> <tr id="row1"> <td>text 1</td> <td>text 2</td> <td class="hidden"> <div>text hidden</div> </td> </tr> </table>

javascript:

$(document).ready(function() { $('tr').on('click', function(event) { var $row = $(this); $row.find('td:not(.hidden)').animate({ opacity: 0.5}, function() { $row.find('.hidden').fadein(); }); }); });

jquery html show-hide