Question

我想知道最有效的方法是什么。我尝试过很多方法，但是没有结果。

我目前有一个表格行，当点击它时，我希望它改变行的不透明度并淡入两个按钮。

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

我出于数据原因使用表格。基本上我想知道如何实现它，当你点击＃row1时，它会淡化不透明度并淡化id #hidden。

Answer 1

请参阅fadeTo：http://api.jquery.com/fadeTo/

$('#row1').click(function()
{
  $(this).fadeTo(500, 1); // 100% opacity.  change 1 to .9 or whatever other value between 0 and 1 you want
  $(this).find('#hidden').fadeIn(); // fade all the way in.  Could just do $('#hidden') but I assume your code will evolve to where it will be a div with a class of hidden instead of an ID, as an ID must be unique per HTML document
});

奖励积分，为您的行添加一个类，或者为您的表添加一个类，以便您可以通过ID定位而不是row1，例如。

<table class="my-table">
  <tr>...</tr>
  <tr>...</tr>
</table>

然后

$('.my-table tr').click(function() { ... });

Answer 2

演示：http://jsfiddle.net/4utt9/

执行此操作的一种方法是使用animte和fadeIn。目前尚不清楚您是否希望先前隐藏的按钮具有与行出现时相同的新不透明度。但你可以在CSS中改变它。

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

如果您希望隐藏部分不是部分透明，可以执行以下操作：

演示：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();
        });
    });
});

Answer 3

其他答案没有考虑到改变tr的不透明度会影响其子级的不透明度

$('#row1').on('click', function(){
    $(this).find('td').animate({opacity:0.5}, 1000);
    $(this).find('#hidden').fadeIn().parent().stop().css({opacity:1});
});

单击，更改不透明度并淡入隐藏的div

3 个答案: