jQueryのslideUp（）は 'この' DIV

Question

：

 <div class="features"> 
      <span class="overlay"><img src="img/webdesign.png" /></span> 
      <h2>Web Design</h2> 
      <p>Cow pig turkey, chuck sausage pork loin venison biltong shoulder. Shoulder pancetta short loin beef ribs, turkey corned beef shankle swine spare ribs pork chop hamburger beef brisket shank. Pork belly tenderloin brisket, strip steak ribeye bacon tail andouille shoulder t-bone flank venison chicken.</p> 
     </div> 

Span class overlayは絶対に私はこれらdiv class featuresの3つ有するH2 + P.を覆う位置しています。 features divの上にカーソルを置いたときにjQueryを使用したい場合、そのdivのオーバーレイだけがスライドし、ユーザーがホバーを離れるときにoverlay divを戻します。

$(".features").hover(
    function() { 
    $('.overlay').slideUp(); 
    }, 
    function() { 
    $('.overlay').slideDown(); 
    } 
); 

私はこれまでのところ、これを持っているが、私はそれが仕事をdoesntの非常に注意してくださいね：）

Answer 1

クラスオーバーレイの要素があるDIV内で選択されるようにjqueryのセレクタ機能にthisコンテキストを追加します。現在ホバリングしている。

はこれを試してみてください：

$(".features").hover(function() {  
    $('.overlay', this).slideUp(); 
    }, function() {  
    $('.overlay', this).slideDown(); 
}); 

Answer 2

.slideToggle()はあなたの友達です。

$(".features").hover(function() 
{ 
    $(this).find('.overlay').slideToggle(); 
    // or 
    $('.overlay', this).slideToggle(); 
}); 

// fin