单击时，更改不透明度并淡入隐藏的 div [关闭]答案

【问题标题】：On click, change opacity and fade in hidden div [closed]单击时，更改不透明度并淡入隐藏的 div [关闭]
【发布时间】：2013-02-20 23:54:58
【问题描述】：

我想知道执行此操作的最有效方法是什么。我尝试了许多在此处发布但没有结果的方法。

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

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

出于数据原因，我使用表格。基本上我想知道如何制作它，所以当您单击#row1 时，它会淡化不透明度并淡化 id #hidden。

【问题讨论】：

标签： jquery html show-hide

【解决方案1】：

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

【讨论】：

如果我想要第三个 div 中的文本怎么办。文本这降低了不透明度
这是隐藏的
点击上面的时候会显示出来。

【解决方案2】：

见淡入淡出：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() { ... });

【讨论】：

感谢第一部分，这对我来说很有意义。我有与使该行降低不透明度但也显示#hidden div然后将其淡化为相同不透明度的代码类似的代码。有没有办法不褪色#hidden，它似乎被隐藏了，因为它是TR的孩子。
不确定你在问什么。你想显示隐藏但不褪色吗？只需将其弹出而不会褪色吗？

【解决方案3】：

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

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

【讨论】：