1

私は現在このコードを使用しています：

var gallery = $('ul#gallery').children();

$(gallery).filter(':even').not(':last').hover(function () {$(this).toggleClass('next')});

この新しいクラスをフェードインさせようとしています。現在、画像が含まれた <li> があり、背景はありません。「次の」クラスが追加されると、ホバーすると背景画像が表示されます。画像を点滅/フェードさせずに、新しいクラスでフェードインする方法はありますか?

4

1 に答える 1

3

jQueryUI がインストールされている場合は、期間を追加してクラスをフェードアニメーション化できます。

$(this).toggleClass('next', 500);

http://jqueryui.com/demos/toggleClass/

しかし、私の知る限り、背景画像のみに影響する個別の不透明度設定はありません。したがって、それをフェードインしたい場合は、要素全体をフェードする必要がありますが、これはあなたが述べたように、あなたが望むものではありません.

本当に効果が必要な場合は、別の要素をクラスに与えた要素の前に追加し、その要素を (背景画像と共に) フェードインすることもできます。

要素はabsolute、残りのコンテンツに影響を与えないように配置する必要があります。

次のような結果になります。

CSS:

li {
    position: relative;
}

.background {
    width: 100%;
    height: 100%;
    background:orange;  // This would be your background image instead
    position: absolute;
    top: 0;
    left: 0;
}

.content {
    position: relative;
}

HTML:

<ul id='gallery'>
        <li>
            <div class='background'></div>  // Prepend and fade in
            <div class='content'>hi there</div>
        </li>
</ul>

jQuery:

hover()2 つの関数を取ります。1 つはあなたmouseenterのとき、もう 1 つはあなたのときですmouseleave。

// すべての .background 要素の不透明度を 0 に設定 $('.background').css({opacity: 0});

var gallery = $('ul#gallery').children();

gallery.filter(':even').not(':last').hover(
  function () {
       $(this).find('.background').animate({'opacity': 1}, 500);
  },
  function () {
       $(this).find('.background').animate({'opacity': 0}, 500);
});

編集：

参考までに、セレクターを変更して、 を呼び出さなくてもすぐに必要なものを取得できます.filter()。

var gallery = $('ul#gallery li:even:not(:last)');

gallery.hover(...

編集：

最初の文の文言を変更し、ドキュメントへのリンクを追加しました。

于 2010-05-17T20:31:41.363 に答える