3

ここで多くのグーグル検索と他の投稿を調べた後、これがまだ可能かどうかはまだわかりません。基本的に、:hover ですばやく別の色にフェードするテーブル行に背景色を設定したい - これは Jquery で可能ですか?

背景のホバーにさまざまな色を使用する、または使用したい複数のテーブルを使用しています。現時点では、ホバーイベントを行うために CSS だけを使用していますが、微妙だが素敵な効果を追加してみたいと思っています。素敵な分厚いテーブル行です。

****編集****

私は解決策を見つけました:私はJquery UIを使用しています-

$('tr').mouseover(function() {
    $('td', this).stop(true, true).animate
        ({ backgroundColor: "red" }, 1000);
});

$('tr').mouseout(function() {
    $('td', this).stop(true, true).animate
        ({ backgroundColor: "#666" }, 1000);
});
4

4 に答える 4

1

テーブルセルの背景ホバーイベントに異なる色を使用したいので、このjsFiddleは、背景色プロパティを使用して、NTSC色の疑似カラーマップを介してマウスホバーの各セルの色を変更する方法を示します。

この純粋なCSSソリューションは、ユーザーのマウスの位置にすばやく対応できるため、 jQueryやその他のライブラリは必要ありません。

私が提供した例でアニメーション化されたフェードを使用すると、トランジションが多すぎて混乱を引き起こすセルが多すぎると思います。とはいえ、必要に応じてjQueryアニメーション効果を追加するのは簡単ですが、テーブルのレイアウトスキームによって異なります。

これは、jQueryを使用して改訂されたjsFiddleです。

于 2012-05-25T10:39:12.300 に答える
1

jQuery UI のColor Animate エフェクトを使用できます。

于 2012-05-25T09:16:14.977 に答える
1

私は解決策を見つけました:私はJquery UIを使用しています-

$('tr').mouseover(function() {
    $('td', this).stop(true, true).animate
        ({ backgroundColor: "red" }, 1000);
});

$('tr').mouseout(function() {
    $('td', this).stop(true, true).animate
        ({ backgroundColor: "#666" }, 1000);
});
于 2012-05-25T14:30:30.037 に答える
0

これは、私のプロジェクトの 1 つで使用したコードです。

     $('#table1 td, #table2 td').hover(function(){
        $(this).parents('tr').addClass('active').animate({opacity: 0.65,}, 500);
        $(this).parents('tr').addClass('active').animate(
             {opacity: 0.65,}, 500, function() {
           //Animation complete.
           $(this).animate({opacity: 1,}, 'slow');
     });
        $(this).mouseleave(function(){
            $(this).parents('tr').removeClass('active');
        });
    });

にはcss、次のようなものが必要です。

#table1 .active { background: #CCC;}
#table2 .active { background: #F2F2F2;}
于 2012-05-25T09:14:54.110 に答える