点击后，更改不透明度并淡入暗格div

我想知道什么是最有效的方法来执行此操作。我尝试了许多发布在这里但没有结果的方法。点击后，更改不透明度并淡入暗格div

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

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

我正在使用数据表的原因。基本上我想知道如何做到这一点，当你点击＃row1时，它会淡化不透明度并淡入ID＃隐藏。

来源

2013-02-20 James

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

来源

2013-02-21 00:15:29 Cymen

如果我想要在第三个div中的文字怎么办？文字不透明度降低

This is hidden

点击上述时显示。 – James 2013-02-21 02:39:11

见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() { ... });

来源

2013-02-21 00:02:39

感谢您的第一部分，这对我来说很有意义。我有类似的代码，使行降低不透明度，但也显示＃隐藏的div，然后淡化到相同的不透明度。有没有办法淡化＃隐藏，它似乎被隐藏，因为它是TR的孩子。 – James 2013-02-21 00:17:09

不确定你在问什么。你想显示隐藏但不褪色吗？只是弹出它在w/out衰落？ – 2013-02-21 01:04:38

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

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

来源

2013-02-21 00:36:30 Popnoodles

点击后，更改不透明度并淡入暗格div

回答

相关问题