jqueryを使用してホバリングリンク上でスパンを指定

Question

私は、ホバリングされたときにリンク上に表示するスパンを指定しようとしています。私は以下のコードでこれを行いますが、ホバリングされたアイテムだけではなく、スパンを含むすべてのリンクについても同様です。私はどのようにコードをより具体化できるのだろうかと思っていた。どんな助けでも大歓迎です。

  $('ul#portfolio a').hover(function() { 


       $('ul#portfolio a span').fadeIn();}, function() { $('ul#portfolio a span').fadeOut(); 


      }); 

Answer 1

代わりにこれを使用します。ここでは

$(this).find('span').fadeIn(); 

// ... 

$(this).find('span').fadeOut(); 

thisがイベントを受信a要素を表しています。 $(this)はjQueryオブジェクトにラップし、find()^[docs]メソッドはネストされたspan要素を探します。

完全なコードは次のとおりです。

$('ul#portfolio a').hover(function() { 
    $(this).find('span').fadeIn(); 
}, function() { 
    $(this).find('span').fadeOut(); 
}); 

だけで不透明度を設定するよりも、fadeOut()^[docs]方法がより多くを行うことに注意してください。また、アニメーションが完了した後で要素を非表示にします。

あなたが代わりにfadeTo()^[docs]メソッドを使用することもできます。

$('ul#portfolio a').hover(function() { 
    $(this).find('span').fadeTo(600, 1); 
}, function() { 
    $(this).find('span').fadeTo(600, 0); 
}); 

を...またはあなたも、このようにそれを行うことができます：ショーン・ハルピン@

$('img').hover(function(e) { 
    $(this).fadeTo(600, e.type === 'mouseenter'); 
}); 

Answer 2

$('ul#portfolio a').hover(function() { 
    $('span',$(this)).fadeIn(); 
}, function() { 
    $('span',$(this)).fadeOut(); 
});