12

したがって、リンクであるこれらのh1要素があり、それらにクラスを追加し、要素にカーソルを合わせたらそのクラスをフェードインします。次に、onMouseOutでクラスを削除し、クラスをフェードします。しかし、フェード機能を使用しても何も起こりません。それが要素を隠すように見る。何か案は？

jQuery(".categories h1 a").hover(
function () {
    jQuery(this).fadeIn("slow").addClass("active");
},
function(){
    jQuery(this).fadeOut("slow").removeClass("active");
});
});

ありがとう！

編集：：：

jQuery("h1").hover(function() {
      jQuery(this).stop().animate({ backgroundColor: "#a7bf51"}, 800);
      },function() {
      jQuery(this).stop().animate({ backgroundColor: "#FFFFFF"}, 800);
      });
});
4

6 に答える 6

13

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

$(function() {
    $(".categories h1 a").hover(function() {
        $(this).stop(true,true).addClass("active", 500);
    }, function() {
        $(this).stop(true,true).removeClass("active", 100);
    });    
});

デモ(何らかの理由で、最初は適切にアニメーション化 (フェード) しません..しかし、それ以降は正常に動作します)

編集：完全を期すために更新されました。

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

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

});

デモ

于 2012-05-03T21:20:21.203 に答える
8

余分な負荷がかかるため jquery UI を使用したくない場合は、次の操作を実行できます。

（「隠し」ブートストラップクラスがアプリで使用されている場合に役立ちました）

クラスを削除しながらゆっくりとフェードインします。

$('.myClass').removeClass('hidden').fadeOut(0).fadeIn(10000)

ゆっくりとフェードアウトし、クラスを追加してからフェードインします。

$('.myClass').fadeOut(1000, function(){
    $(this).addClass('hidden'); //or any other class
}).fadeIn(10000)

これが誰かのタスクを簡素化することを願っています!

于 2016-07-16T17:35:10.063 に答える
2

クラスのスタイルをフェードインさせたいようですね。そのためには animate() を調べる必要があります: http://api.jquery.com/animate/

fadeIn は単に要素をフェードインします。

于 2012-05-03T21:08:21.283 に答える
1

クラス間のクロスフェードはできないと思いますが、animate機能は使えます。 animate指定した時間内に任意の css 変数に影響を与えることができます。

http://api.jquery.com/animate/

css ファイルから一部のスタイリングが削除されることはわかっていますが、やはり、jQuery がクラス間でクロス フェードするとは思いません。

于 2012-05-03T21:10:40.973 に答える
1

jQuery UI ライブラリが読み込まれている場合は、toggleClass 関数に追加のパラメーターを設定できます。

css で不透明度を設定します。

h1 a {
  opacity:0.8;
}

h1 a.hovered {
  opacity: 1.0;
}

それから

jQuery(".categories h1 a").hover(function(e) {
    $(this).toggleClass('hover', 1000);
}

1000 は、イベントのミリ秒カウンターです。したがって、エフェクトは、ホバーすると 1 秒で不透明度 1.0 にフェードし、ホバーしないと 1 秒でフェードアウトします。

于 2012-05-03T21:11:18.753 に答える
0

これを試してください。これがjsFiddleです（ここにリンクの説明を入力してください）：

<script type="text/javascript">
    jQuery(".categories h1").hover(function () {
            jQuery(this).stop().animate({ "background-color": "#a7bf51"}, 800);
            jQuery(this).addClass("active");
            jQuery(this).find("a").fadeIn("slow");
        },
        function() {
            jQuery(this).stop().animate({ "background-color": "#FFFFFF"}, 800);
            jQuery(this).addClass("active");
            jQuery(this).find("a").fadeOut("slow");
    });
</script>
<style type="text/css">
    .categories h1 {
        background-color: rgb(200, 200, 200);
        display: block;
        padding: 5px;
        margin: 5px;
        width: 100px
    }
    .categories h1 a {
        display: none;
    }
</style>
<div class="categories">
    <h1><a href="#">Item 1</a></h1>
    <h1><a href="#">Item 2</a></h1>
    <h1><a href="#">Item 3</a></h1>
</div>​
于 2012-05-03T21:37:08.650 に答える