1

これを実行する最も効率的な方法は何だろうと考えていました。ここに投稿された多くの方法を試しましたが、結果はありませんでした。

現在、テーブル行があり、クリックすると、行の不透明度を変更し、2 つのボタンでフェードインしたいと考えています。

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

データ上の理由からテーブルを使用しています。基本的に、#row1 をクリックすると、不透明度がフェードし、ID #hidden がフェードインするようにする方法を考えています。

4

3 に答える 3

0

デモ： http： //jsfiddle.net/4utt9/

これを行う1つの方法は、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();
        });
    });
});
于 2013-02-21T00:15:29.137 に答える
0

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

ボーナス ポイント。行にクラスを追加するか、テーブルにクラスを追加して、row1IDの代わりに対象を指定できるようにします。

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

それから

$('.my-table tr').click(function() { ... });
于 2013-02-21T00:02:39.430 に答える
0

他の回答では、tr の不透明度の変更がその子の不透明度に影響することを考慮していません。

$('#row1').on('click', function(){
    $(this).find('td').animate({opacity:0.5}, 1000);
    $(this).find('#hidden').fadeIn().parent().stop().css({opacity:1});
});
于 2013-02-21T00:36:30.953 に答える