jQueryと 'this' issue

Question

私はhr要素に影響を与えようとしています。ユーザーがロゴの上にカーソルを置くと、下のhr要素の幅が100％に変更され、不透明度が追加されます。

現在、すべてのhr要素は同時に変更されます。どのようにイメージを変えただけでいいのですか？

これは、現在

$('.img-fluid').hover(function(){ 
    $(this).animate({ 
     opacity:0.5 
     },200); 
    $('.logo').animate({ 
     width:'100%' 
    },200); 

}, 
function(){ 
    $(this).animate({ 
     opacity:1 
     },200); 
    $('.logo').animate({ 
     width:'50%' 
    },200); 
}); 

$('.img-fluid').hover(function(){ 
    $('.logo',this).animate({ 
     width:'100%' 
    },200); 
}, function(){ 
    $('.logo',this).animate({ 
     width:'50%' 
    },200); 

}); 

私のコード

HTMLです：

<div class="row col-md-11 mx-auto"> 
    <div class="col-md-2 mx-auto"> 
     <img src="images/logos/lyle_scott.png" class="img-fluid"> 
     <hr class="logo"> </div> 
    <div class="col-md-2 mx-auto"> 
     <img src="images/logos/makser.jpg" class="img-fluid"> 
     <hr class="logo"> </div> 
    <div class="col-md-2 mx-auto"> 
     <img src="images/logos/maxfli.jpg" class="img-fluid"> 
     <hr class="logo"> </div> 
    <div class="col-md-2 mx-auto"> 
     <img src="images/logos/mizuno.png" class="img-fluid"> 
     <hr class="logo"> </div> 
    <div class="col-md-2 mx-auto"> 
     <img src="images/logos/odyssey.jpg" class="img-fluid"> 
     <hr class="logo"> </div> 
    </div> 

また、私がダウンしてこのコードを短縮し、1つの関数にそれをすべて実行できるようにしたいと思います。現在、各エフェクトは個別に処理されています。

は良いアイデアのために、この画像を参照してください：https://i.stack.imgur.com/mSIdj.png

Answer 1

セレクタでクラスを使用するだけであれば、同じクラスのすべての要素が選択されます。 hrが画像と同じ親要素内にあるので、適切なhr要素を取得するには、jQuery .siblings()メソッドが必要です。

$(".img-fluid").on("mouseenter", function() { 
    $(this).animate({ 
     opacity:1 
    },200); 
    $(this).siblings('.logo').animate({ 
     width:'100%' 
    },200); 
}); 
$(".img-fluid").on("mouseleave", function() { 
    $(this).animate({ 
     opacity:0.5 
    },200); 
    $(this).siblings('.logo').animate({ 
     width:'50%' 
    },200); 
}); 

Answer 2

私はあなたのHTMLの構造を知らないが、私はあなたがそれの内側にロゴの要素を持って、その後img-fuildクラスに置くことを想定しています。

$(".img-fluid").on("mouseover", function() { 
     $(this).animate({ 
      opacity:0.5 
      },200); 
     $(this).find('.logo').animate({ 
      width:'100%' 
     },200); 
    }); 

Answer 3

可能であれば、アニメーションやトランジションを使用してjQueryではなくCSSを使用します。 ：ホバーを使うと、それがすでにどのように動作しているかということから、単一の要素にのみ影響を与えることを心配する必要はありません。