1

テーブルを作成していますが、特定の行を強調表示したいと考えています。

私はこれを使用してこれを行いました:

$this.css('background-color', 'green');

$this.delay(3000).animate({ backgroundColor: $color }, 3000);

$this = the row in question.

$color = the previous row color.

しかし、CSSクラスで動作させたいので、このようなもの

$this.addClass('highlight');

クラス.highlightにはbackground-color.

問題は、クラスを追加した後、background-color.

私が使用する場合：

$this.delay(3000).animate({ backgroundColor: $color }, 3000);

background-colorクラス .highlight 自体のプロパティをオーバーライドしないため、機能しないようです。removeClassそして、メソッドやswitchClassfrom .highlighttoをアニメーション化する方法がわかりません''。

これを行うために考えていない解決策はありますか。

前もって感謝します。

4

4 に答える 4

1

代わりに CSS トランジションを使用してください。パフォーマンスが向上し、よりシンプルになります。

フィドルの例

transition:background-color 0.3s linear;

ただし、これは明らかに、アニメーションに対するブラウザのサポートをそれほど提供していません。

于 2013-08-28T10:16:06.237 に答える
0

すべてのスタイル変更をアニメーション化する jQuery UI の .switchClass を使用できます: .switchClass

強調表示が完了したら、コールバックを使用して元に戻します。

$('div').click(function() {
    $(this).switchClass( "normal", "color", 1000, "easeInOutQuad", function(){
        $(this).delay(3000).switchClass( "color", "normal", 1000, "easeInOutQuad" );
});

});

ここで私をいじってください！

于 2013-08-28T10:58:29.487 に答える
0

jQuery の addClass と removeClass を使用できます。

if($(document).scrollTop() > 250)
{    
$('#div').addClass("show");
}
else
{
$('#div').removeClass("show");
}
});

これは、"hide" などの元のクラスを div クラス "show" に置き換えることです。この特定のコード スニペットは、ユーザーがページを 250 ピクセル下にスクロールしたときにバナーを表示します。

このコードを使用している場合は、IE8 などのブラウザーがこれをサポートしていないユーザーを考慮していない限り、CSS3 トランジションを使用する方が良い (そしてよりスムーズである) ことを覚えておいてください。

編集：IE7ユーザーを考慮しているため、このようにしている理由に気付きました。完全。私は文字通りこの問題を自分で解決しました。

私が使用した回避策は、css3 トランジションを設定し、トランジションがサポートされていない場合に jQuery を使用する if ステートメントを含む検出器を用意することでした。以下を参照してください。

var Detect = (function() {
            var
            //Add CSS properties to test for
                            props = "transition".split(","),
            //Browser prefixes
                            CSSprefix = "Webkit,Moz,O,ms,Khtml".split(","),
                            d = document.createElement("detect"),
                            test = [],
                            p, pty;
            // test prefixed code
            function TestPrefixes(prop) {
                            var
                                            Uprop = prop.charAt(0).toUpperCase() + prop.substr(1),
                                            All = (prop + ' ' + CSSprefix.join(Uprop + ' ') + Uprop).split(' ');
                            for (var n = 0, np = All.length; n < np; n++) {
                                            if (d.style[All[n]] === "") return true;
                            }
    return false;
            }
            for (p in props) {
                            pty = props[p];
                            test[pty] = TestPrefixes(pty);
            }
            return test;

            }());


if (Detect.transition) {
        $(function(){
$(window).scroll(function() {
//your code here
//remember to use an if else
于 2013-08-28T11:32:43.130 に答える
0

.animate()関数は、高さ、幅、左などの「数値」プロパティで機能しますが、背景色では機能しません。

これを試すことができます：

$(document).ready( function() {
$('tr.normal').on('click', function() {
   $(this)
   .hide()
   .delay(3000)
   .fadeIn('slow')
   .toggleClass('highlight');
   });             
 });
于 2013-08-28T11:29:58.637 に答える