點擊後，更改不透明度並淡入暗格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

回答

相關問題