jQueryは.addclassにフェードを追加します

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

  •  01-10-2019
  •  | 
  •  

質問

どうすればフェードできますか。

これがリンクです -

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

ありがとう

役に立ちましたか？

解決

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

他のヒント

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

すべてのプロパティのアニメーションをサポートします CSSクラス全体, 、したがって、JQuery UIを使用して、必要な効果を達成できるはずです。

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

JQQuery UIを使用する方が良いでしょう。これは、JQueryに記載されているように、この種の機能を提供するためです アニメーション ページ：

jquery ui Projectは、色などのいくつかの非数値スタイルをアニメーション化することにより、.Animate（）メソッドを拡張します。このプロジェクトには、個々の属性ではなくCSSクラスを通じてアニメーションを指定するためのメカニズムも含まれています

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