jquery - jqueryのフェードインaddClass

Question

jQueryを使用して、ホバー時の要素にクラスを適用しています。addClass('active')

クラスは境界線を追加し、背景色を変更しますが、オンまたはオフだけではなく、これらの変更をフェードインしたいと思います。

jQuery を使用してクラスを追加し、クラスが追加する効果をフェードインすることは可能ですか?

Answer 1

jQuery UI .addClassおよび.removeClassを使用してみてください。

$(function() {
    $("div.className").hover(function() {
        $(this).stop(true,true).addClass("active", 500);
    }, function() {
        $(this).stop(true,true).removeClass("active", 100);
    });    
});

.animate を使用して目的の効果を得ることもできます。下記参照、

これが機能するにはjQueryUIが必要になることに注意してください。

$(function() {
    $("div.className").hover(function() {
        $(this).stop().animate({
            backgroundColor: "#a7bf51"
        }, 800);
    }, function() {
        $(this).stop().animate({
            backgroundColor: "#FFFFFF"
        }, 800);
    });

});

Answer 2

jQueryUI を使用する場合、これはhttp://api.jqueryui.com/addClass/に組み込まれます。そうでない場合は、クラスからすべての属性を抽出し、それらを 1 つずつアニメーション化します。

Answer 3

機能があなたにとって良くない場合、おそらく1つの良い解決策.animate()です（画像の背景などがあるため）。

div同じコンテンツと新しいクラスを持つ要素を作成します。div要素の上に新しいものを配置し、fade inそれを配置します。