6

jquery を使用して css クラスをフェードインするにはどうすればよいか考えています。私が探している効果は、ここに表示されているようなものです: https://squareup.com/

私がこれまでに試したことは次のとおりです。

$(document).ready(function() {
    $('.mini-nav li').hover(function () {
    $('.hover').fadeIn(slow);
};
});

.addClass() メソッドについて考えましたが、どこに追加すればよいか (またはそれが最適かどうか) がわかりません。

編集:これは私が試したもののフィドルです: http://jsfiddle.net/J93NR/1/

4

4 に答える 4

10

これにはjqueryは必要ありません。純粋なCSSソリューションの方がはるかに簡単です（フィドル）。

<div class="outer"><div class="inner"></div></div>

.outer {
    background: url(...);
}
.inner {
    background: url(...);
    opacity: 1;
    transition: opacity 0.3s;
}
.inner:hover {
    opacity: 0;
}

http://jsfiddle.net/ZAgnY/

于 2012-04-21T01:06:02.340 に答える
2 
<style type="text/css">
#leaf,#leaf:before{background:url(sprite.png)}
#leaf{position:relative}
#leaf:before{content:'\0020';position:absolute;top:0;left:0;display:none}
</style>

<!-- more html -->

<ul id="menu">
  <li id="leaf"><a href="#">Link</a></li>
</ul>

<!-- more html -->

<script type="text/javascript">
$(document).ready(function () {
  $('.min-nav li').hover({
    // Handler in
    function () {
      $("#leaf:before").fadeIn("slow");
    },
    // Handler out
    function () {
      $("#leaf:before").fadeOut("slow");
    }
  });
});
</script>

もちろん、jQueryの代わりにCSS3を使用してこれを実現することも可能です。あなたがリンクしたウェブサイトの人たちがやっていることはまさにそれです。

于 2012-04-21T00:10:08.363 に答える
2

jQuery UI を使用している場合は、switchclass()を使用してクラスを使用してアニメーション化するオプションがあります。

アップデート：

$("element").addClass("classname").fadeIn("slow");
于 2012-04-20T23:58:38.253 に答える
1

コードに構文エラーがあります: これを試してください:

$(document).ready(function() {
    $('.mini-nav li').mouseenter(function () {
    $('.hover').fadeIn("slow");
    });
});

代わりにタグを選択aして、メニューの表示領域の外側にスタイルを設定する方法で li タグにカーソルを合わせて、これを試してください。

http://jsfiddle.net/J93NR/3/

また：

http://jsfiddle.net/J93NR/4/

于 2012-04-20T23:57:14.583 に答える