web-dev-qa-db-ja.com

jqueryは.addClassにフェードを追加します

.addClassをフェードインおよびフェードアウトするにはどうすればよいですか。

ここにリンクがあります-

http://www.bikramyogajoondalup.com.au/about-bikram-yoga/postures-benefits.html

そしてここにコードがあります-

$(document).ready(function() {
  $('#menu li#Q_01,#menu li#Q_03,#menu li#Q_05,#menu li#Q_07,#menu li#Q_09,#menu li#Q_11,#menu li#Q_13').hover(function() {
    $(this).addClass('pretty-hover');
  }, function() {
    $(this).removeClass('pretty-hover');
  });
});

$(document).ready(function() {
  $('#menu li#Q_02,#menu li#Q_04,#menu li#Q_06,#menu li#Q_08,#menu li#Q_10,#menu li#Q_12').hover(function() {
    $(this).addClass('pretty-hover_01');
  }, function() {
    $(this).removeClass('pretty-hover_01');
  });
});

ありがとう

jqueryjquery-animatefading
17
Nik

JQuery UIがオプションの場合、これには .toggleClass(class, duration) を使用できます。

また、セレクターを単純化することもできます。 _:even_ および _:odd_ は、次のように現在のセレクターに基づいてジョブを実行します。

_$(function() {
  $('#menu li:even').hover(function() {
    $(this).toggleClass('pretty-hover', 500);
  });
  $('#menu li:odd').hover(function() {
    $(this).toggleClass('pretty-hover_01', 500);
  });
});
_

上記は逆に思えますが、_:even_はfirst要素を選択します。これは0ベースであるため、0、2、4なども選択します。同意します、メンテナンスが少し簡単になります:)

コメントに基づいて編集-.toggleclass()はクイックホバーに固執するため、期待どおりに機能する代替手段を次に示します。

_$('#menu li.post:even').hover(function() {
  $(this).stop().animate({ backgroundColor: '#009FDD', color: '#FFF' }, 500);
}, function() {
  $(this).stop().animate({ backgroundColor: '#FFFFFF', color: '#666' }, 500);  
});
$('#menu li.post:odd').hover(function() {
  $(this).stop().animate({ backgroundColor: '#623A10', color: '#FFF' }, 500);
}, function() {
  $(this).stop().animate({ backgroundColor: '#FFFFFF', color: '#666' }, 500);  
});
_
13
Nick Craver

jQuery 。animate 関数が最善の策ですが、CSSクラス間でアニメーション化することはできません。個々のスタイルを指定する必要があります。

JQuery animate ページで説明されているように、この種の機能が提供されるため、jQqueryUIを使用することをお勧めします。

jQuery UI プロジェクトは、色などの数値以外のスタイルをアニメーション化できるようにすることで、.animate（）メソッドを拡張します。プロジェクトには、個々の属性ではなく、CSSクラスを介してアニメーションを指定するためのメカニズムも含まれています

0
James Wiseman

要素の色をフェードする場合は、 jQuery UI を使用する必要があります。これは、フェードとアニメーションをより高度にサポートしています（コアjQueryは整数プロパティのみをフェード/アニメーション化できます：色はありません ' t作業）。

CSSクラス全体 のすべてのプロパティのアニメーション化もサポートしているため、jQuery UIを使用すると、必要な効果を実現できるはずです。

0
Dean Harding