バックグラウンドで画像フェードを持つjQueryLi（クラスでフェード）

StackOverflow https://stackoverflow.com/questions/2851757

  •  27-09-2019
  •  | 
  •  

質問

現在、このコードを使用しています。

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

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

私はそれをこの新しいクラスにフェードさせようとしています。現在、u003Cli>画像が入っていて、背景はありません。 「次の」クラスが追加されると、ホバリングすると背景画像が表示されます。画像をまばたき/フェードすることなく、新しいクラスでフェードする方法はありますか？

役に立ちましたか？

解決

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つの関数を取得します。あなたがいつ mouseenter, 、もう一つはあなたがいるとき mouseleave.

//すべての.background Elements $（'。backgrough '）。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(...

編集：

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top