8

これはできますか？

たとえば。

.class1{
  background-image:(whatever.jpg)
  color: #fff;
}

.class2{
  background-image:(whatever2.jpg)
  color: #999;
}

マウスが要素の上にあるときにclass1からclass2にフェードし、マウスが外にあるときにclass1に戻すことはできますか？

4

7 に答える 7

17

プラグインを使用したくない場合は、次の操作を実行できます。

$(".class1").hover(
function () {
    $(this).fadeOut(function () {
        $(this).removeClass("class1").addClass("class2").fadeIn('fast');
    });
},
function () {
    $(this).fadeOut(function () {
        $(this).removeClass("class2").addClass("class1").fadeIn('fast');
    });
});
于 2011-02-07T10:20:14.560 に答える
15

jQueryUIの。への拡張機能をご覧addClassください。これにより、期間パラメータでアニメーションの可能性を与えることができます。

ここで、私はあなたがこのようなことをしたいと思います：

$('.class1').hover(function(){
    $(this).addClass('class2', 800);
}, function(){
    $(this).removeClass('class2', 800);
});

明らかに、これにはjQueryUIをインストールする必要があります。

于 2011-02-07T10:14:10.663 に答える
4

このプラグインはあなたが探しているものだと思います。クラス間でアニメーション化できます。例えば：

$('.class1').animateToClass('.class2', 1000);
于 2011-02-07T10:11:17.997 に答える
2

両方に同じ絶対位置を指定すると、fadeIn() と fadeOut() を使用すると、この効果が得られます (onmouseover と onmouseout に関連付けられます)。

于 2011-02-07T10:11:35.783 に答える
1

これは私の実装です:

      $(this).fadeOut("fast"); or $(this).hide();
      $(this).removeClass('css1').addClass('css2');
 $(this).fadeIn("slow");
于 2012-03-02T16:04:25.817 に答える
-2

これはあなたにとって完全な助けになるかもしれないと思います.... 

$('.class1').mouseover(function() {
    $(this).toggleClass('class2');
 });
于 2011-02-07T10:18:31.083 に答える