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

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

奖励积分，将一个类添加到您的行中，或者将一个类添加到您的表中，这样您就可以定位它而不是row1通过 ID，例如

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

然后

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

Answer 2

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

一种方法是使用animteand 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});
});