0

私はこのjQueryスニペットに出くわしました：

 $(".faded").each(function(i) {
   $(this).delay(i * 400).fadeIn();
 });​

実際の動作をご覧ください：http：//jsfiddle.net/RExZs/

とにかく私はそれをホバー機能に変えようとしているので、ナビゲーションメニューボタンにカーソルを合わせると、このクールなディレイ効果でdivがフェードインします。そして、マウスが離れると、divが消えるはずです。「STORE」ボタン（アンカー）用なので、ホバーすると商品一覧が表示されます。

これまでのところ、私が思いついたのは次のとおりです。

  $(".products").hover(function(){   // I added THIS line
   $(".products-list").hide().each(function(i) { 
   $(this).delay(i * 400).fadeIn();  
    }); 
 });   // and of course, THIS line

問題は、ページが読み込まれるとすぐにdivの表示を開始することです（LOL）。

さて、「STORE」ボタンにカーソルを合わせると効果は完璧ですが、マウスを離すと最初からやり直して、それらのdivをリロードします。

私を助けてください、または私が私のいまいましいjQuery中毒を乗り越えるためにどこに行くことができるか教えてください。:)

ありがとうございました！

4

2 に答える 2

0

それはあなたがあなたの「マウスアウト」効果をどうしたいかによります。jsFiddle

$(".products").hover(
function(){
   $(".products-list").each(function(i) { 
       $(this).delay(i * 400).fadeIn();  
   }); 
},
function(){
    $(".products-list").stop(true).show().hide();
});​

PS：常に最新バージョンのjQueryを使用するようにしてください。マウスを.productsすばやく出し入れすることで、アイテムがフェードインする順序を変更できることがわかります。ただし、1.4ではなくjquery 1.7を使用すると、常に正しい順序でフェードします。jQueryは、暫定的にアニメーションがキューに入れられる方法を変更したようです。 jQuery1.7.2フィドル

于 2012-06-02T15:32:38.927 に答える
0

マウスインとマウスアウトには別の動作が必要です。

trueまた、アニメーション キューを空にして現在のアニメーションの最後にジャンプするように指示する追加のパラメーターを使用して、切り替え時に既存のアニメーションを停止する必要があります。

$(".products").hover(function() {
   $(".products-list").stop(true).each(function(i) { 
       $(this).delay(i * 200).fadeIn();  
   }); 
}, function() {
    $(".products-list").stop(true, true).fadeOut();
});

デモについてはhttp://jsfiddle.net/alnitak/tvCBq/を参照してください

于 2012-06-02T15:28:27.373 に答える