17

.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');
  });
});

ありがとう

4

3 に答える 3

13

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ますが、最初の要素は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);  
});
于 2010-04-28T00:44:27.453 に答える
0

要素の色をフェードさせたい場合は、フェードとアニメーションをより高度にサポートするjQuery UIを使用する必要があります(コア jQuery は整数プロパティのみをフェード/アニメーション化できます: 色は機能しません)。

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

于 2010-04-27T06:41:55.297 に答える
0

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

jQuery animateページに記載されているように、この種の機能が提供されるため、jQquery UI を使用することをお勧めします。

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

于 2010-04-27T07:36:27.960 に答える